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Praise for Head First HTML and CSS 


‘Head Finst HTML and CSS is a thoroughly modern introduction to forward-looking practices in 
web page markup and presentation. It correctly anticipates readers puzalements and handles 
them just in time. The highly graphic and incremental approach precisely mimics the best way 
to earn this stuff: make a small change and see it in the browser to understand what each new 


Danny Goodman, author of Dynamic HTML: The Definitive Guide 


“Eric Freeman and Elisabeth Robson clearly know their stt As the Internet becomes more com- 
Plex, inspired construction of weh pages becomes increasingly critical. Elegant design i at the core 
fof every chapter here, each concept conveyed with equal doses of pragmatism and wit” 
Ken Goldstein, Executive Vice President and 
Managing Director, Disney Online. 


“The Web would be a much better place if every HTML. author started off by reading this 
boak” 
L. David Baron, Technical Lead, Layout and CSS, Mozilla Corporation 
http: /dbaron.org/ 


“Tve been writing HTML and CSS for 10 years now; and what used to be a long wrial-and- 
error learning process has now been reduced neatly into an engaging paperback. HTML used 
to be something you could just hack away at ший things looked okay on screen, but with the 
advent of web standards and the movement toward accessibility, sloppy coding practice is not 
acceptable anymore...fiom a business standpoint or a social responsibility standpoint. Head 
Fit HTML and CSS teaches you how to do things right from the beginning without making the 
whole process seem overwhelming; HTML, when properly explained, i no more complicated 
than plain English, and the authors do an excellent job of keeping every concept at eye level.” 


Mike Davidson, President and CEO, Newsvine, Inc. 


The information covered in this book is the same material the pros know; but taught in an 
educational and humorous manner that doesn't ever make you think the material is impossible 
to learn or you are out of your element.” 
Christopher Schmitt, author of The CSS Cookbook 
and Professional CSS, schmittiachristophenorg 


‘Ob, great. You made an HTML book simple enough a GEO can understand it. What will you 
do next? Accounting simple enough my developer can understand î? Next thing you know we'll 
he collaborating as a team or something, 


Janice Fraser, CEO, Adaptive Path 
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More Praise for Head First HTML and CSS 


“1 *һеап* Had Fit HTML and CSS і teaches you everything you need to earn in a "un. 
coated" format!" 
Sally Applin, UI designer and fine artist, http://sally.com 


"This book has humor and charm, but most importantly it has heart. I know that sounds 
ridiculous to say about a technical hook, but 1 really sense that at its core, this bonk (orat least 
its authors) really care that the reader learns the material. This comes across in the style, the 
language, and the techniques, Learning — real understanding and comprehension. on the part 
of the reader is clearly topmost in the minds of the authors. And thank you, thank you, thank 
уоп, for the book's strong and sensible advocacy of standards compliance. Ies great ta sec an 
entry-level book, that think will be widely read and studied, campaign so eloquently and 
persuasively on behalf of the value of standards compliance in web page code. I even found 

in here a few great arguments 1 had not thought of ones 1 can remember and use when Lam 
asked (as 1 stil am) “Маг the deal with compliance and why should we care? I'l have more 
ammo now! Lalo lied thatthe book sprinkles in some basics about the mechanics of actually 
getting a web page live FTP, web server basies, fle structures et.” 


Robert Neer, Director of Product Development, Movies.com 


‘Head Find HTML and CSS а most entertaining book for learning how to build а great web. 
page. It not only covers everything you need to know about HTML and CSS, it also excels in 
explaining everything in layman's terms with a lot of great examples. 1 found the book truly 
enjoyable to read, and I learned something new!” 
Newton Lee, Editor-in-Chief, ACM Computers in Entertainment. 
ир: / l'un acmcie.org 


“Му wife stale the book. She's never done any web design, so she needed a book like Had Fint 
HTML and CSS to take her from beginning to end. She now has а list of websites she wants to 
build for our son’ class, our family... Tm lucky, get the book back when she's done." 


David Kaminsky, Master Inventor, IBM 


“Beware. If you're someone who reads at night before falling asleep, you'll have to restrict Head 
Fist HTML and CSS ло daytime reading, This book wakes up your brain." 


Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 
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Praise for other books by Eric Freeman and Elisabeth Robson 


“From the awesome Head Fit Java folks, this book uses every conceivable wick to help you 


understand and remember. Nat just loads of pictures pictures of humans, which tend to interest 
other humans. Surprises everywhere. Stories, be 


like pizza and chocolate, Need we say more?) Plus, 


ие humans love narrative. (Stories about things 
"s darned funny" 


Bill Camarda, READ ONLY 


"This book's admir 


ble clarity; humor, and substantial doses of clever make i the sort of book that 
helps even nonprogrammers think well about problem saving” 


Cory Doctorow, co-editor of Boing Boing 
and author of Down and Out in the Magic Kingdom 
and Someone Comes to Town, Someone Leaves Town 


“1 feel like a thousand pounds of books have just been ified off of my head." 


Ward Cunningham, inventor of the wiki 
and founder of the Hillside Group 


“This book is close to perfect, because of the way it combines expertise and readability: It speaks with 
authority and it reads beautifully I's one of the very few ойо 


ate books Гуе ever read that strikes 
me as indispensable. Г put maybe 10 books in this category, at the outside)" 


David Gelernter, professor of computer science, 
Yale University, and author of Mirror Worlds and Machine Beauty 


“A nosedive into the realm of patterns, a land where complex things become simple, but where 
simple things сап also become complex. 1 can think of no better tour guides than these authors.” 
Miko Matsumura, industry analyst, The Middleware Company 
former Chief Java Evangelist, Sun Microsystems 


“I laughed, I cried, it moved me.” 


Daniel Steinberg, Editor-in-Chief, java.net 


“Just the right tone for the gecked-out, castal-cool диги coder in all of us. The right reference for 
Practical development strategies gets my brain go 
tired, stale professor-speak.” 


ng without having to slog through a bunch of 
Travis Kalanick, founder of Scour and Red Swoosh, 
member of the MIT TR100 


literally love this book. In fact, I kissed this book in front of my wifes” 
Satish Kumar 


Other O'Reilly books by Eric Freeman and Elisabeth Robson 
Head First Design Patterns 
Head First HTML with CSS & XHTML (first edition) 
Head First HTMLS Programming 


Other related books from O'Reilly 
HTMLS: Up and Running 
HTMLS Canvas 
HTMLS: The Missing Manual 
HTMLS Geolocation. 
HTMLS Graphics with SVG and CSS3 
HTMLS Forms 
HTMLS Media. 


Other books in O'Reilly's Head First series 
Head First Ci 
Head First Java. 
Head First Object-Oriented Analysis & Design (OOA&D) 
Head First Serviets and JSP 
Head First SQL 
Head First Software Development 
Head First JavaScript 
Head First Ajax 
Head First Rails 
Head First PHP & MySQL 
Head First Web Design 
Head First Networking 
Head First Phone and iPad Development 
Head First jQuery. 
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Wouldn't it be dreamy if there 
were an HTML book that didn't 
assume you knew what elements, 
attributes, validation, selectors, and 
pseudo-classes were, all by page. 
‘three? It's probably just a 
fantasy 


Elisabeth Robson 
Eric Freeman 
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“To the W3C, for saving us from the browser wars and. 
for their brilliance in separating structure (HTML) from 
presentation (CSS) 


And fir making HTML and CSS complex enough that 
people need a book to learn it, 
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the autho 


Authors of Head First HTML and CSS 


Erie is described by Head First series co-creator 
Sierra as "one of those rare individuals fluent in the I 
practice, and culture of multiple domains 


hacker, corporate VP. engineer, think tank” 


om hipster 


Professionally, Eric recently ended nearly a decade as a media 
company executive having held the position of CTO of 
Disney Online and Disneycom at the Walt Disney Company 
Erie is now devoting his time to WickedlySmart,a startup he 
co-created with Elisabeth. 


By training, Erie а computer scientist, having studied with 
industry luminary David Gelernter during his Ph.D. work 
at Yale University His dissertation is credited as the seminal 
work in alternatives to the desktop metaphor, and also as the 
first implementation of activity streams, a concept he and Dr 
Gelernter developed. 


In his spare time, Eric is deeply involved with musi; you'll 
find Eric's latest project, a collaboration with ambient music 
pioneer Steve Roach, available on the Phone App Store 
under the name Immersion Station. 


Erie lives with his wife and young daughter on Bainbridge 
Island, His daughter is a frequent vistor to Eric 
she loves to turn the knobs of his synths and audio dert 


Write to Eric at erde@wickedìysmart cen or visit his site 


Elisabeth i a software engineer, writer, and trainer. 
She has been passionate about technology since her 
days as a student at Yale University; where she earned a 
masters of science in computer science and designed a 
concurrent, visual programming language and software 
architecture 


lisabeth's been involved withthe Internet since the 
arly days; she co-created the а 
the Ada Project, 
то help women in computer science find career and 
mentorship information online, 


winning website, 
ne of the first websites designed 


She's currently co-founder of WickedlySmart, an online 
education experience centered on web technologies, 
where she creates books, articles, videos and more 
Previously, as Director of Special Projects at O'Reilly 
Media, Elisabeth produced in-person workshops and 
‘online courses оп а variety of technical topics and 


developed her pasion for creating learning experiences 
to help people understand technology: Prior o her work 
wich O'Reilly, Elisabeth spent time spreading fairy dust 
at the Walt Disney Company, where she led research 
and development efforts in digital media, 

When not in front of her computer, you'll find Elisabeth 
hiking, cycling or kayaking in the great outdoors, with 
her camera nearby, or cooking vegetarian meals 


You can send her email at betheu. 


edlysmart.com 


or visit her blog at http: //elisabethrobson. con. 
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Intro 


Your brain on HTML and CSS. Here you are trying to learn something, while 
here your brain is doing you a favor by making sure the learning doesn't stick. Your brain's 
thinking, "Better leave room for more important things, ike which wild animals to avoid 
and whether naked snowboarding is a bad idea? So how do you trick your brain into 
thinking that your life depends on knowing HTML and CSS? 
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getting to know html 


The Language of the Web 


The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo 
HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, ot only are you going to understand some basic 
elements of HTML, but you'll also be able to speak HTML with a little style. Heck, 
by the end of this book, you'll be taking HTML like you grew up in Webvi 
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going further with hypertext 
Meeting the “HT” in HTML 


Did someone say “hypertext?” What's that? on, only the entre 
basis ofthe Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 
‘markup language (he "ML" in HTML) for describing the structure of web pages. Now 
жета going to check ош the “HT in HTML, hypertext, which wil let us break free of 
a single page and ink to other pages. Along to way we're going o meet a powerful 
‘new element, tho <a> element, and ат how being "relative" is а groovy thing. o, 
{aston your seat bells- you re about to leam some hypertext. 


Head Fist Lounge, noz and иней н 
Creating the new lounge n 
What id we do? n 
Те E 
Gening organized ss 
Organizing the Tonge 
Techical albu. E 
Planing your pats w 
Fixing bos broken images % 
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building blocks 


Web Page Construction 


I was told Ра actually be creating web pages in this book? 
You've certainly learned a lot already: tags, elements, inks, paths...but its ай for 
‘nothing If you don't create some kilar web pages with that knowledge. In this chapter 
жеге going to ramp up construction: youre going to take a web page from conception 
do blueprint, pour the foundation, build i and even put on some finishing touches. All 
you need is your hard hat and your toolbelt, as well be adding some new tools and 
giving you some insider knowledge that would make Tim "The Toolman" Taylor proud, 


From journal wea at 2 mph т 
"The mach design eth EI 
Fro a sketch to an outline " 
From the outline toa web page [Н 
“Testing Tony's web page " 
Adding sce new clemens в 
‘Meet the <q> element a 
Loocoong quotes EI 
Айй a Бадан “ 
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getting connected 


A Trip to Webville 


Web pages are a dish best served on the Internet. So tar 
youve only created HTML pages that Ive on your own computer. You've also 
опу inked о pages that are on your own computer. We're about to change all 
that. in this chapter well encourage you to get those web pages onthe Internat 
Where all our fiends, fans, and customers can actually see them. We'll also 
reveal the mysteries of inking to other pages by cracking the code af the h, t, up. 
“1 JM, w. w. So, gather your belongings; our next stop is Webvile. 


Getting Starbuze (or уишн anto the Web um 
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Moving in 
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What's an absolute pathi? 1% 
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adding images {о your pages 


Meeting the Media 


Smile and say “cheese.” Actually, smile and say “gif,” 
“jpg,” or “png”—tese are going to be your choices when “developing 
pictures" for the Web. In this chapter you're going to learn ай about adding your 
{ist media type to your pages: images. Got some digital photos you need to get 
online? No problem. Got a logo you need to get on your page? Got it covered. 

But before we get into ай that, don't you sti need to be formally introduced to 

the <img> element? So sorry, we weren't being rude; we just never saw the “right 
opening To make up for it, here's an entire chapter devoted to <img>. By the end 
of the chapter you're going to know all the ins and ош of how to use the <img> 
element and йз attributes. You're also going to see exactly how this litle element 
causes the browser to do extra work to retrieve and display your images. 


How de browser works with images we 
Hon ages wrk LI 
“img>: k'k mot just relative links anymore m 
— M пз 
Sizing up your images m 
Creating the inate n ste hd їз 
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More pas for yd m 
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Add the logo to the nye weh page E 
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standards and all that jazz 
Serious HTML 


What else is there to know about HTML? You're well оп your way to 
‘mastering HTML. In fact, isn't it about ime we move on to CSS and learn how to make 
all this bland markup look fabulous? Before we do, we need to make sure your HTML 
is really ready for tho big leagues. Don't got us wrong, you've been writing first-class 
HTML all along, but there are just a few etra things you need to do to make it "industry 
standard" HTML. I's also time you think about making sure you're using the latest and 
‘greatest HTML standard, otherwise known as HTMLS. By doing so, youl ensure that 
your pages play well with the latest Device, and that they'll display more uniformly 
across all browsers (at least the ones you'd care about). You'll ass have pages that 
load faster, pages that are guaranteed to play well with CSS, and pages that are ready 
to move into the futuro as the standards grow. Gel ready, this is the chapter where you 
move from web nkerer lo web professional 


A Bret History of HTML, 


"The new aad pened, HTMLS dx. 
HTML the new ving anda 

Adding the document type defi. эю 
"The dociype steve E 
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Validating the Head Бен Lounge m 
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getting started with CSS 


Adding a Little Style 


1 was told there'd be CSS in this book. So far youve been 
Concentrating on leaming HTML to create the structure of your web pages. But as 
you can sea, tho browser's idea of style leaves a lot to be desired. Sura, we could 
сай the fashion police, but we don't need to. With CSS, you're going to completely. 
control the presentation of your pages, often without even changing your HTML. 
Could i really be so easy? Well you are going to have to learn a new language; 
after al, Webvill is a bilingual town. After reading this chapter's gude to learning 
the language of CSS, you're going to be able to stand on either side of Main Street 
апа hold а conversation. 


Noire not in Kansas anymore ЕД 
Overheard оа Welwille’s “Trading Spaces E 
Using CSS wilh HTML. зю 
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styling with Fonts and colors 


Expanding Your Vocabulary 


table of contents 


Your CSS language lessons are coming along nicely. You 
already have the basies of CSS down, and you know how to create CSS rules to 
‘select and specify the sy of an element. Now it's time to build your vocabulary, 
and that means picking up some new properties and leaming what they can do 
dor you. In this chapter we're going to work through some ofthe most common 
properties that affect the display of text. To do that, you'l need to learn a few 
things about fonts and color. You're going to see you dont have to be stuck with 
же fonts everyone else uses, or the clunky sizes and styles the browser uses as 
же defaults for paragraphs and headings, Youre also going to see there is a lot 
‘more to color than meets the eye. 


"Text and fants rm 30,000 feet 
What it a Font family anyway? 
Speen font Eales using CSS 


Dusting olî Tony s journal 


How do 1 deal wih everyone having dierent ont? 
How Web han work 

Hos add a Wel Font ta your pase 

Adjusting Font sizes 

Sa, how should speci oa? 

Lats make these changes to the font sizes in Топу web page 
Changing a nr weiht 

Adiisg siyle to you ats 
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the bex model 
Getting Intimate with Elements 


To do advanced web construction, you really need to know 
your building materials. in is chapter we're going to take а dose look 

at our building materials: the HTML elements. We're going о put block and inne. 
elements right under the microscope and see what hey re made ot You'l see how 
you сап contol just about every aspect of how an element is constructed with CSS. 
But we don't sop there—you'l also seo how you can give elements unique identities. 
‘And, if that werent enough, you're going to leam when and why you might want to 
use multiple stylesheets. So, tum the page and start getting intimate with elements 
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А else look atthe bosc model EI 
What you can do to baes эш 
Creating the guarantee нуе эз 
Ами dee ef the paragraph border эв 
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Border fu and finish m 
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divs and spans 
Advanced Web Construction 


It's time to get ready for heavy construction. in this chapter 
кете going to roll out two new HTML elements: «div» and <span>. These are no 
simple "two by fours"; these are full-blown steel beams. With <div> and <span>, 
you're going о build some serious supporting structures, and once you've got hose 
sttuctures in place, you're going to be able to style them all in new and powerful 
ways. Now, we couldnt help but notice that your CSS toolbelt is really starting to 

{i up, so їз ime to show you a few shortcuts that will make specifying ай these 
properties a lot easier. And we've also got some special guests in this chapter, 

the pseudo-classes, which are going to allow you to create some very interesting 
selectors. (If you're thinking that "pseudo-classes" would make a great name for your 
next band, too late; we beat you to it) 


—— 02 us 
Let explore how we ean divide n page int оре sectione a 
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layout and positioning, = 


Arranging Elements 


It's time to teach your HTML elements new tricks. We're not 
‘going to let those HTML elements just sit there anymare—it's about time they get 

up and help us creata some pages with real layouts. How? Well, you've dat а good 
feel for the «div» and «span» structural elements and you know all about how the 
‘box model works, right? So, now is time to use ай that knowledge to craft some real 
designs. No, we're not just talking about more background and font colors—we're 
talking about full-blown professional designs using multicolumn layouts. This isthe 
chapter where everything you've leamed comes together. 


Did you d the Super Bean Power? am 
Use the Flo Like am 
‘What about inline lenient us 
How ital works together ањ 
Howto Moat an clement am 
эз 
Mave the sidebar jut helow the header am 
Fixing the wou problem 01 
Seti the margin on the main section am 
Solving the ovp problem m 
Righty шыу, ey loose am 
Liquid and Kosen desigs so 
How abate positioning veria 500 
Changing the Salute CSS 507 
How CSS table display words m 
Ming HTML structure би the table display sia 
‘Wha’ we problem with the spacing? 517 
‘Problems with be header эм 
Fig the healer ons wih at E 
Positioning the aad sam 
How docs sed poring vod? ES 
Using a negative ili property value эзз 
eerie Solutions эю 
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html5 markup 
Modern HTML 


So, we're sure you've heard the hype around HTMLS. And, 
еп how far along you are in this book, youre probably wondering if you made the 
tight purchase, Non, one thing to be clear about, up Iront, is that everything you've 
earned in this book has bean HTML. and more spacifcally has met the HTMLS 
standard. But there are some new aspects of HTML markup that were added with 
the HTMLS standard that we haven't covered yet, and that's what we're going to do 
in this chapter. Most of these additions are evolutionary, and you're going to find you 
эге quite comfortable with them given ай the hard work you've already done in this 
book. There's some revolutionary stuff oo (Ке video), and we'l taik about that in this 
chapter as well. So, ots dive in and take а look at these new additional 


Rethinking HTML arcte m 


Uplate your Strbuzz НП 


ш. E 


How to update your CSS For the new elements 


Sening up the CSS for the og page E 
We sill need to add dte t the bog. sm 
Adding the «time» clement to your blog EI 


How o айй nce eh 


——— E 
Su, whats wrong with de header anyway? E 


A final test deive for the headers 


Completing the tigation 
Who needle GPS? Giving the navigation а test eie ws 


Toda! Look at that navigation! 


Creating the new Шор ce 


Light, camera, action. sm 
How does the cvi dec element work? EI 
Closely inspecting the viden atte, E 
What you need ia know about video formate sn 
The video format contendere эт 
Host juggle ай йине Besa эю 


Haw to be es 


mave specie with your video бешин 


Exerci Solutio 
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Getting Tabular 


If it walks like a table and talks like a table... There comes a ime 
in Me when we have to deal with the dreaded tabular data. Whether you need to 
‘create а page representing your company’s inventory over the last year or a catalog 
‘of your vinyimation collection (don't worry, we won't tell). you know you need to do 
itin HTML, but how? Wel, have we got a deal for you: order now, and in a single 
chapter we'l reveal the secrets that wil allow you to put your very own data right 
Inside HTML tables. But here's more: with every order мел throw in our exclusive 
guide to styling HTML tables. And, if you act now, as а spacial bonus, well throw in 
ош guide to styling HTML lists. Don't hesitate; сай now! 


Hos do you mae tables with HTML? өз 
(Creating a table wilh HTML [Л 
‘What the browser crentes sos 
“Tales dc sos 
Adding a capo. Lr 
ebore we start yng Jets get he table ito Товуз page su 
daun ose hunden clle ele 
How about sone esios? sum 
"Tony made an interesting dice 520 
Another look at Ty ые E 
Howto tell сн tû span mone than one row єз 
“Tet deve the таме өн 
Trouble in paradie? вз 
Overriding the CSS for the nested able heading im 
Giving Топу site the final poli 620 
‘Whar you мам а etm marker? n 
Exercise дао в 


юй 
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html forms 
Getting Interactive 


So far all your web communication has been one-wa; 


tents 


from your page to your visitors. Galy. woulant n be nice i your vistors 


‘could talk back? That's where HTML forms come in: once you enable your pages 
With forms (along with a tle help from a web server), your pages are going to be 
able о gather customer feedback, take an online order, get the next move in an 


online game. ог collect the votes in a “hot or пог contest. In this chapter you're going 


o meet a whole team of HTML elements that work together to create wab forms. 
‘Youll also learn a bit about what goes on behind the scenes in the server to support. 
forms, and we'll even tak about keeping those forms stylish. 


How forms work 
What ou write in HTML. 

‘What the browser creates 

How the rern clement works 

Ging абу ta bud the Bean Machine form 

Adding tbe <form element 

How frm element ames work 

Back to getting those «input» element ina your HTML 
Msg some mare input cement 
Adding the <seLect> element 
Give the customer a chic it whale or ground beans 


your farm 


Punching the radio buttons 
Using mare input typer 

Adding the tubes and date ipit types 
Completing the farm 

Msg the есм and text area 

Watching GET in action 

Getting the farm elements ino HTML structure 
Sling the биш with CSS 

A word about secenity 


Whar mone could рону go into a form? 
Exercise Solutions 
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appendix: leftovers 
The Top Ten Topics (We Didn’t Cover) 


We covered a lot of ground, and 
you're almost finished with this 
book. Well miss you, but before we let you 
оо, we wouldn't fel right about sending you out 
into the world without а litle more preparation. 
"We can't possibly fit everything youl need to 
‘know into this relatively short chapter. Actual, 
we did originally include everything you need to 
know about HTML and CSS (not already covered 
by the other chapters), by reducing the type point 
size to 00004. It all ft, but nobody could read it 
So, we threw most of it away, and kept the best 
bits for this Top Ten appendix. 


#1 More CSS selectors L3 
#2 Vendorgecilir CSS properties 700 
#5 CSS lande аай tants m 
#4 Interactiviy mws 
#5 HTMLS APL and web appe w 


#6 More on Wel Fonts 706 
#7 Tool crat web pages w 
# xHTML. иш 
#9 Serverside ср m 
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Who is this book for? 


If you can answer 


s" to all of these: 


@ Do you have access toa computer with a web browser 
anda text editor? 


Do you want to learn, understand, and remember how 
to creato web pages using the best techniques and the 
most recent standards? 


O Do you prefer stimulating dinner-party conversation 
to dry, dull, academic lectures? 


this book is for you, 


Who should probably back away from this book? 


If you can answer "yes? to any one of these: 


@ Are you completely new to computers? 
(You don't need to be advanced, but you should 
understand folders and fles, simple text editing 
applications, and how to use a web browser. 


O Are you a kick-butt web developer looking fora 
reference book? 


O Are you afraid to ну something diferent? ноша 
You rather have a rool сага than mox stipes with 
plaid? Do ou beleve that a technical book cant be 
Serious HTML tags are anthropomorphized? 


х9 


this book is not for you. 


from marketing this book 
For anyone with à redit tard J 


юм, 


— you have atte 


Computer каный. 


in the last deade 
answer ee 


We know what youre thinking. 


How can this be a serious hook?” 
‘What's with all the graphics 


“Can I actually learn it this way?" 


And we know what your brain is thinking. 


Your brain craves novelty Its always searching, scanning, eig for 
something unusual. Ie was built that way and it helps you stay alive, 


Today, you're less likely to be а tiger snack. But your brain's sil looking 
You just never know 


So what does your brain do with all the routine, ordinary; normal things 
you encounter? Everything it cau ta stop them from interfering with the 
brain's yal job. recording things that тай. It doesn't bother saving the 
boring things; they never make it past the “this i obviously not important" 
fiker 


How does your brain use what's important? Suppose you're out for a day 
hike and а tiger jumps in front of you what happens inside your head 
and body? 


Great, Only 
637 more dull dry, 
‘boring pages. 


Neurons fire. Emotions crank up. Chenicals sug. 


And that's how your brain knows. 
This must be important! Don't forget it! 


But imagine you're at home, or in a library W's а sae, warm, tiger- 
fice zone. You're studying Getting ready for an exam. Or trying to 
learn some tough technical topic your boss thinks will take a week, 
10 days at the most. 


Jost one problem. Your brains trying to do you a big favor: Ls 
"rying to make sure that this овча non-important content doesn't 
luti up scarce resources. Resources that are better spent storing 
the really б things. Like tigers. Like the danger of fire. Like how 
you should never again snowboard in shorts. 


And there's no simple way to tell your brain, "Hey brain, thank 
you very much, but no matter how dull this book is, and how little 
Tm registering on the emotional Richter scale right now, I really de 
want you to keep this stuff around." 
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We think of a “Head First” reader as а Jearner. 


во what does it take to learn something? First, you have V getit, then make 
бо уоп don't forget t t's not about pushing facis о YON head. Based 
sure latest research in cognitive science, dat abe ‘and educational 
эзуелоду, learning takes a lot more than text оп а Page We know what 
turns your brain on. 


some of the Head First learning principles: 


Make it visual Images ae far more memorable than word 


Мал ага make learning much more effective (up 10 89% 
one Aene in recall and anser studies) аво makes hne 


ment nite Put the words within or noar the SES reus 
. 


dealer they late to rather than on the pottar ar ой aromer 
э an earners н be up to hice say to solve probem 
related to the content 


—— 
Use a conversational and personalized sty! 


. performed pt айе beter on ронан а Ifthe content 


In recent studies, 


ШОН) nec K rather than 
.. — winga fomai tane: Tel stones maad T Use casual language. Don't 
p qa yoursel too sey Which wouid you pay more Sentit 
Б irotan dinner pary companion or atecture? mtem 
jd reote а айтыв ces forl 
a Got the learner to think more deeply. in other words er Jast toate 
О чуо. actly fex your neurons, nothing much happens in убы КА А 
de Arenaer nas mette енин curious. and inspired 
Ji аме problems, draw conclusions, and generate new 


x amowledge. And for that, you need challenges, exercises 
nd ynought-provoking questions, and activities that 
awe both sides of the brain, and multiple senses 


pad the realy want wn ths but can stay awake past page оле” 
мрн Your prain pays attention to thing: tat are out of et s 


вокан keop—the reader's attention. Weve al 
1 


bees was ee citing unexpected, Learning a new, bee doesnthave 
Vibe boring. You brain wi leam much more quickly fts nt 


Touch their emotions. We now know that your ality to неон something ls largely 
een on emptor content You remember wat nate. about You remember when 
жй something Мо, were nor talking heart merch нн about a boy and hls dog. Were 
You mte ha sre crai fun "wie. T andthe eee А rule” that comes 
.. нервову ee tiks a a a realize you know 


уша биг "т more technical than thou” Bob fom engineering deem 


www it-ebooks.into 


жеи, 


Metacognition: thinking about thinking 


If you really want to learn, and you want to learn more quickly and more deeply 
рау attention to how you pay attention, Think about how you think. Learn how you 
learn, 


T wonder how I 

can trick my brain 

into remembering 
‘his stuff 


Most of us did not take courses on metacognition or earning theory when we were 
growing up, We were exerted o learn, but rarely taught how to learn 


But we assume that if you're holding this book, you really want to learn. j 
how to create web pages. And you probably don't want to spend a lot of 
time. And you want to remember what you read, and be able to apply it D 
And for that, you've got to undentond it. To get the most from this book, 
ог ary book or learning experience, take responsibility for your brain. 
Your brain on this content. 
“The trick is to get your brain to see the new material you're learning as 
Really Important, Crucial to your well-being. Аз important as а tiger. 
Otherwise, you're in for a constant battle, with your brain doing its best 
to keep the new content from sticking. 
So how DO you get your brain to think HTML & CSS 
are as important as a tiger? 
There's the slow: tedious way, or the faster; more effective way. The 
slow way is about sheer repetition. You obviously know that you ar 
able to learn and remember even the dullest of topics, if you keep pounding on the same 
thing With enough repetition, your brain says, “This doesn't fe importane to him, but he 
keeps looking at the same thing ave and oer and oer, зо I suppose it must be." 
The faster way i to do anything that increases brain activity, especially different 
byes of brain activity. The things on the previous page are а big part of the solution, 
and they e all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words zhi the pictures they describe (as opposed to 
somewhere else in the page, like а caption ar in the body tex) causes your brain to try 
to make sense of how the words and picture relate, and this causes more neurons to fire, 
More neurons firing = more chances for your brain to gt that this is something worth 
paying attention to, and possibly recording. 
A conversational style helps because people tend to pay more attention when they 
perceive that they're in а conversation, since they're expected to follow along and hold up 
their end, The amazing thing is, your brain doesn't necessarily cae that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while siting in а en 
of passive attendees. No need to stay awake. 
But pictures and conversational syle are just the beginning, 

you are here + xxix 
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Here's what WE did: 


We used pictures, because your brain is tuned for visuals, not text As far as your brain's 
concerned, а picture really is worth 1,024 words. And when text and pictures work together, we 
embedded the text in the pictures because your brain works more effectively when the text is 
within the thing the ext refers to, as opposed to in a caption or buried in the text somewhere 


We used redundancy, saying the same thing in dir ways and with dillzent media types, 
and multiple senses, 1o increase the chance that the content ets coded into more than one area of 
your brain 


We used concepts and pictures in unexpected ways because your brain is tuned far novel 
and we used pictures and ideas with at least sme emotional cantent, because your brain is 
tuned to pay attention to the biochemistry of emotions. That which causes you to fl something 
is more likely to be remembered, even if that feeling is nothing more than а idle humor, 
surprise, or interest. 


We used a personalized, conversational style, because your brain is uned to pay more 
attention when it believes you're in a conversation than if it thinks you're passively listening to а 
presentation. Your brain docs this eve 


Be the Browser 


. аавал because your brain tuned to karn and remember 
sore when you do things than when you mad about thing And we made the execs 

. because that's what most ppl pei 

. . prefer lep byatep proceduras while Q 
.. the big picture fint, While someone cbe just .. 
ойе example. Bu egret оГ your ovm learning preference, перам benefis hom seeing he 

seme cannes иреше bo элде мен. 


Weischdeconenfor Both sides f your Bran, cas e orf your bra you 
mes he mer hl yr aeo Кага тай eerie d бе eger yo c e ted Puzles 
Ses оар e i el dre rin fn menm ging he eric he oe tu 

morc podicie aicaming rs ong par of ine 


And we included stories and exercises that present more than оне point of view, because 
‘your brain is tuned о learn more deeply when its forced to make evaluations and judgments 


We included ehallenges, with exercises, and by asking questions that don't always have 

а ига} answer, because your rain is tuned to learn and remember when it has to uwt at 
something Think about it уон can't get your dady in shape just by ийде people at the gym. 
But we did our best to make sure that when you're working hard, it's on the rig things. That 
you're not spending one extra dendrite processing а hard-tounderstand example, or 
‘parsing difficult, jargon-laden, or overly terse text 

We used people. In stories, examples, pictures, etc., because, well, because plea person, And 
your brain pays mare attention to fe! than i does to digs, 


We used an 80/20 approach. We assume that if you're going to be а kick-but web developer, 
this won't be your only book. So we don't talk about ing. Jus the stuif you'll actually nod. 


www it-ebooks.info 


e \ Here’s what YOU саи do to bend 
your brain into submission 


So, we did our рап, The restis up to you, These tips are a. 
staring point listen to your brain and figure out what works 

гы у. _ for you and what doesnt, Try new things 

Cab this ot and 

este 


P" 4 


а 


‘Slow down. The тоге you understand, 
the less you have to memorize. 

Doo’ just al Stop and think. When the. 
book asks you a question, don't jus skip to the 
answer, Imagine that someone really is asking 
the question, The more deeply you foree yo 
brain to think, the better chance you have of 


learning and remembering 


Do the exercises. Write your own notes. 
We put them in, but if we did them for you, 

that would be like having someone else do 

your workouts for you. And don't just look at 

the exercises. Use a penei 

evidence that physical activity while learning 
can increase the learning 


There's plenty of 


Read the “There Are No Dumb Questions.” 
ans ай of them. They're not optional 

they're part of the core content! 
Don't skip them. 


Make this the last thing you read before 
bed. Or at least the last challenging thing- 
Part of the earning (especially the transfer to 
long-term memory) happens afier you put the 
book down. Your brain needs time on йз own, 


do more processing. IF you put in something new 
during that processing time, some of what you 
just learned will be lost. 


Drink water. Lots of it. 
Your brain works best in а nice bath of Dui. 
Dehydration (which can happen before you ever 
decl thirsty) decreases cognitive function. 


Speaking activates a different part of the b 
H you're trying to understand something, or 


increase your chance of remembering it late, say 
it out loud, Better still, try to explain it out loud 
te someone else. асап 


more quickly, and 
you might uncover ideas you hadn't known were 
there when you were reading about it 


Listen to your brain. 
Pay attention to whether your brain is getting 
overloaded. И you find yourself starting to skim the 
surface or forget what you just read, its time fora 
break. Once you go past а certain point, you won't 
learn faster by trying to shove more in, and you 
might even hurt the process. 


Feel something! 
Your brain needs to know that this mater Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke is 
still better than feeling nothing at all. 


Create something! 

Apply this to something new you're designing, or 
rework an older project. Just do something to get some 
experience beyond the exercises and activities in 
this hook. All you ne 


isa pencil and a problem 
to solve..a problem that might benefit from using 
HTML and CSS, 


how to use this book 


Read me 


Thisis a learning experience, not a reference hook. We deliberately stripped out 
everything that might get in the way of learning whatever itis we're working on at that 
point in the book, And the first time through, you need to begin at the beginning, because 
the book makes assumptions about what you've already seen and learned, 


We begin by teaching basic HTML, then standards-based HTMLS. 


To write standards-based HTML, there аге a lot of technical details you need to 
understand that aren't helpful when you're trying to learn the basics of HTML. Our 
approach is to have you learn the basic concepts of HTML frst (without worrying about 
these detail), and then, when you have а solid understanding of HTML, teach уоп to 
write standarde-compliant HTML (the most recent version of which is HTML) This 
has the added benefit that the technical details are more meaningful after you've already 
earned the basies. 


W's also important that you be writing compliant HTML when you чап using CSS, so we 
make a point of getting you to standards-based HTML. before you begin any serious work 
with CSS, 


We don't cover every single HTML element or attribute or CSS 
property ever created. 


The nd a bt of CSS properties Sure, 
they're all interesting, but our goal was to write а book that weighs less than the person. 
emer them all here. Our focus is on the core HTML elements and 


wea lt of HTML elements, a lat of attributes, 


reading it, so we do 
CSS properties that mater to you, the beginner, and making sure that you really, truly 
deeply understand how and when to use them. In any ease, once you're done with Head 
First HTML and CSS, you'll he able to pick up any reference book and get up t0 speed 
quickly on all the elements and properties we left out 


This book advocates a clean separation between the structure of 
your pages and the presentation of your pages. 


Today serious web pages use HTML to structure their content, and CSS for style and 
presentation. Ninetiesera pages often used a different model, one where HTML was used 
for both structure and style. This book teaches you to use HTML far structure and CSS 


for style; we see no reason to teach you outdated bad habits 


We encourage you to use more than one browser with this hook. 


While we teach you to write HTML and CSS that are hased on standards, you'll still and. 


probably always) encounter minor differences in the way weh browsers display pages. So, 

şe you to pick at least two modern browsers and test your pages using them. 
This will give you experience in seeing the differences among browsers and in creating 
pages that work well in а variety of them. 


We often use tag names for element names. 


Rather than saying “the a element,” or “the 4? element," we use a tag name, like “the <a> 
clement.” While this may not be technically correct (because <a> is an opening tag, not a 

АЫ element, it does make the text more readable, and we usually follow the name 

wich the word “clement” to avoid confusion. 


‘The activities are NOT optional. 


The exercises and activities are not add-ons; hey ve part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you've earned. Don't skip the exercises. The crossword puzzles are the 
only things you don't ae t do, but they're good for giving your brain a chance to think 
about the words їп a diferent context 


‘The redundancy is intentional and important. 


(One distinct difference in a Head First book is that we want you to really get it. And we want 
you to finish the book remembering what you've learned. Most reference hooks don't have 
retention and recall as a goal, but this book is about arning, so you'll se some of the same 
concepts come up more than once, 


The exampl an 


possil 
Our readers tell us that it's frustrating to wade through 200 lines of an example looking for 
the two lines they need to understand. Most examples in this book ate shown within the 
smallest posible contest, so that the part you're trying to earn is clear and simple. Don't 
expect ай of the examples to be robust, or even complete— hey are writen specifically for 
earning, and aren't always fully functional 


We've placed all be example files on the Web so you can download them. You'll find them 
al http: //vickedlysnart. con/hfhtalcss/. 


The 


jin Power exercises don't have апам 


For some of them, there is no right answer, and for others, part of the learning experience 
fof the Brain Power activities is far you to decide if and when your answers are right. In 
some of the Brain Power exercises, you will find hints to point you in the right direction. 
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Valentin Crett 
Barney Marispini 


Fearless leader 


GERR жш" 


шге] 


Pauline sels the "tho 
Our reviewers: 


See ee cda E 
CC K 
defi по stone unturned in their review and the book is much better for it, You guys | 


сыны бас MANN cH CERE, 
айр аш ш orc of HTML and CSS ong oe to hane ш г 
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Esteened Reviewer 
Dead Powers 


We're also extremely gratefil to our esteemed technical reviewer David Powers. 
We have а teal love/hate relationship with David because he made us work 

so hard, but the result was өй so eorth й, The truth be told, based оп David's 
comments, we made significant changes to this book and i is technically twice the 
book it was before. ‘Thank you, David 

At O'Reilly: 


Our biggest thanks to our editor, Brett McLaughlin, who cleared the path for 
this book, removed every obstacle to йз completion, and sacrificed family time to 


get it done. Bret also did hard editing time on this book (not an easy task for а 
Head First tide). Thanks, Bret: this book woulda iappened without уоп. 


Our sincerest thanks to the whole O'Reilly team: 


Don't let Ehe sweater Toal 


Greg Corrin, Glenn Bisignani, Tony Artuso, 
and Kyle Hart all led the way on marketing 

and we appreciate their out-of-the-box approach. 
Thanks to Ellie Vollchausen for her inspired cover design that continues to serve 
us well, and to Karen Montgomery for stepping in and bringing life to this book's 
cover. Thank you, as always, to Calleen Gorman for her hardcore copyedit (and for 


youth guy is hardeore 
(ethnically of course) 


keeping it all ип} And we couldn't have pulled off а color hook like this without Sue 
Willing and Claire Cloutier. 


No Head First acknowledgment would be complete without thanking Mike. 


Loulkides for shaping dhe Head First concept into a series, and to Tim OReilly for always being there and his 
continued support. Finally, thanks to Mike 
d "n Kathy Sierra 


Hendrickson for bringing us into the Head 
First family and having the faith to let us run 
with it 


Kathy Sierra and Bert Bates: 


Last, and anything but least, ıo Kathy 
Sierra and Bert Bates, our partners 

in crime and the BRAINS who ereated the 
series, Thanks, guys, for trusting us ten more 
with your baby. We hope once again we've 
done it justice. The three-day jam session was 
the highlight of writing the book, we hope to 
repeat it soon. Oh, and next time around, can. 
you give LTJ а call and tell him he's just going Meda ert researching ) 
to have to make а trip hack to Seattle? Head First Parelli 


‘eta nore wnat wih тешет an охула You d oben he 
eee our ext Bak ard you nava a уе ami ou 
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Tech reviewers (second edition) Газ 


We couldn't sleep at night without knowing that our high- 
powered HTML & CSS reviewer, David Powers, has scoured 
this hook for inaccuracies. Truth is, so many years had passed 
since the first edition that we һай to hire а private detective 

to locate bim G's a long чогу, but he was finally located in his 
underground HTML & CSS lair and research ab). Anyway more 
seriously, while all the technical faults in this book sit solely with 
the authors (that's us, we can assure you in every case David 
tried 19 make sure we did things right. Once again, David was 
instrumental in the writing of this book, 


We're extremely grateful for everyone on our technical review 
team, Joe Konior joined us once again for this edition, along 
with Dawn Griffiths (co-author of Haad Fist ©), and Shelley 
Powers (an HTML К CSS "power" house who has been writing 
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was amazingly thorough, detailed, and helpful. Thank you. 
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Safari sis over? 300 technology and creative reference 


e hooks and videos а find the answers you need quickly 
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online. Read books on your сей phone and mobile devices. Acces new tiles before 
they are 
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1 getting to know HTML 


E 
The Language of the Web * 


Not so fast. to get to 
know me, youve got to 
speck the universal language 
You know, HTML and CSS, 


The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo: 
HyperText Markup Language, or HTML for short. So, де ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements of HTML, but you'll also be able lo speak HTML with a lle style. Heck, 
by the end of this book you'll be talking HTML Ike you grew up in Wabvill 
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html powers the web 


Ж, 
killed the radio star 


‘Want to get an idea out there? Sell something? Just need a creative 
outlet? Turn to the Webwe don’t need to ell you it has become 
the universal form of communication. Even better, 
communication YOU can participate in, 


‘sa form of 
Bur if you really want to use the Web effectively you've got to 


now a few things about HITML- not to mention, a few things 
about how the Web works too, Let's take а look from 30,000 feet: 


Once c'e puk your files on 


a eb tere an browser an 
fa make web pgs yor Cet er your web pages ever 
йе к бе Ne Tet WU 
Mariap Langage HTML for 


bee, ыд shot on te 
A 


The HTML in your weh page tells the 
browser what reeds to know to display 


Ма there are a lot of PCs dete. 
рун deii gel das yo ob derer tn be tre al ming ч 
veli yo pages will even display wel on cell towers, More importantly, there are 
hones and mobile devices, and work with Friends, Family fara, and potential ситет 
speech browsers and зеет mags for sing hose dentes! 

the val impaired 


Chapter 1 
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the language of the web 


What does the web server do? 


Web servers have а fulltime job on the Internet, tirelessly wait 


for requests from web 
browsers, What kinds of requests? Request for web pages, ima 


sounds, or maybe 
even a video. Wh 


a server gets a reque 
ind then sends back to the browser 


any of these resources, the server finds the 


yaka er 
ke lenet wating 
bel ES 


reyes 
pases or ether 
enen lle majes 


) 


“ 


qe HTML fie bene, 
MA 


— 
“Found it, here ya go" 
R 
and if the server tan 
etse the vesourte tE 
sends it ta the browser 


eye Web Server 


What does the web browser do? 


You already know how a browser works: you're surfing around the Web and you click on a 
link to visit a page. That click causes your browser to request an HTML page from a web 
server, retrieve it, and display the page in your browser window. 


the browser displays 


BB 


_ = Web Server 


But how does the browser know how to display а page? That's where HTML comes in. HTML 
tells the browser all about the content and structure of the page, Let's see how that works 
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writing some html 


What you write (the HTML) 


So, you know HTML is the key о geting а browser to display your pages, but 
what exactly does HTML look like? And what does it do? 


Let's have a lock at a litle HTML. imagine you're going to create a web 
page to advertise the Heal Fint Lour, а local hangout with some good tunes, 
refreshing elixirs, and wireless acces, Here's what you'd write in HTML: 


E 
<head> 
<title>iiead First Lounge</tit1e> O 
</head> 
<body> 
<hi>ivelcone to the Head First Lounge</h1> (B) 
ug وا کے‎ qt» GN 


n us any ev 


ing for refreshing elixirs, 


conversation and maybe a gane 
two of <em>Dance Dance Revolutione/em». @ 


Wireless access is always provided; 


avons (Bring your own web server). 
</p> 
<ha>Di rect tons</n2> O 
<p> 
@ Yount find us right in the center of 
downtown Webville. Come join us! 
</p> i 
</body> о 
</html> el We don’t expect you to know HTML yet. 
At this point you should just be genting a feel 
for what HTML looks like; мете going to cover 
everything in detail in a bit, For пом, study the HTML and ee 
hen it gets represented in the browser on the next page, Be ure 
to pay careful attention to cach eter annotation and how and 
where it и displayed in the browser, 
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What the browser creates 


When the browser reads your HTML, it interprets all he tgs that 
surround your text, Tags are just words or characters in angle brackets, 
like <head>, <p>, chi», and so on. The tags tell the browser about the 
structure and menning of your text So rather than just giving the browser 
a bunch of text, with HTML you can use tags to tell the browser what 
text is in а heading, what text is a paragraph, what text needs to be 
emphasized, ог even where images need to be placed. 


Lecco th owt tn he de 
(aes eh وتا‎ 
V e n renee 


{he browser displays 


тар мии ааста оту 


Welcome to the Head First Lounge е 


LEE 


e ee Rin 
Wireless access is always provided: BYOWS (Bring your own web server). 


Directions ©, 
qoem ne coe 
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тоге about markup and tags 


бы Зз 


2 For starters: Remember that HTML 
stands for HyperText Markup Language, so 

HTML gies you a way to "mark up your text 
wih tags that tl th browser how your text 

is structured. But here в ава he HyperText 
aspoctof HTML, which we talk about a itte 
Ister in he book. 


О; von does the browser decide now 
to display he HTML? 


Д: тишн уш онеге 
‘ttc o pow document wre te 
барга, ийне i раар е, 
vint rese aha and on hen 
Th raton bae have hai 
ataut erf hou o delay each ol tue 
— 


But you don't have to eto far the default 
stings You can add your own style and 
formatting rules with CSS that determine 
fool colors, size, and a lot a other 
characteristics o your page. Well get back 
10 CSS later in he chapler, 


CQ: The HTML for the Head First 

Lounge has ali kinds of indentation and 
spacing, and yet I don't зве that when it 
8 displayed in the browser. How come? 


Conect, and good catch. Browsers 
ignore tabs, rens, and most spaces п 
HTML documents. Instead, they rely on 
узи markup lo determine where Ine and 
paragraph breaks occur. 


Sowhy did we Insert our own formatting it 
‘he browser is just going to опот о To help 
us more easly read the document when 
жете editing the HTML As your 


6 Chapter 


there are no 
Dumb € Questions 


HTML documents became more complicated. 
youll ind a few spaces, retums, and tabs 
here and there realy help to improve the 
readability of the HTML. 


О; so there are nwo levels of headings, 
«i and a sahen рт 


Д: iate sei ttr 
^A he bowery ely 
usi matr ss ety 
rcg onera ag dcn, 
Y a олма angu 
bs 


О; олу do neod tno chim tg? ent 
iustis is an HTML document? 


R 
ten cal ти, he sone 
Soon win v sumi ame 
Wer ara as we siye Ti 
sg rin ok yor 
adipe tci NE 


О: nat makes a fle an HTML fle? 


А: ans. teis asinge eate. 
Uriko a ной preening, пиев 
тозса rating aos nt By 
Cannon ve a n" no end ol 
башак jv бе gag sona 
Rater duel lh os Ba jor 
sor what eh nates iav ри 
pains 


О: everyone is taking about TLS. 
жеше нө wy are we 
Saying l instead of HTML"? 


2 You're leaming about HTML, and 
IS just happens to bo the latast version 

of HTML HTMLS has had alot of tenon 

recently and ats because it simplifies 
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талу ol he ways wo wie HTML and 
enables some new turctonaily, which 
we're going lo cover in this book. aso 
provides some advanced features roug 
is Јасер application programming 
interfaces (APIs) and those afe covered in 
Head First HTML Programming. 


Q: wart soome sity. Vat 
aiat joo at applications have been 
around since, wnat, the Tos? Why isn't 
thee based on a format ike Microso 
Word or a similar application? 


he Web is created out of lax fles 
without any special formating characters. 
This enables any browser in any part of he 
word to retrieve a web page and understand 
its contents. There ме WYSIWYG 
appicatons out here Ike Dreamweaver, 
and thay work great. Butin this book we re 
ong to take down to the bare matal, and 
‘start with un Then you're In good shape 

to understand what your Dreamweaver 
appicatons doing behind he scenes 


О: is there any way to put comments 
fossi TML? 


А: vea, tye piaca your cannes la 
ition d ad» bows wl ol 
‘por on Soja varied oes 
пеп tert he beging o Pe unge 
— ole 1e 


<!-- Here's the beginning of 


the lounge content 


Noice hal you can put comments on 
‘mp Ines. Keep in mind anything you put 
between he . and the >, even HTML, 
wil be ignored by Ке browser. 


tho language of the web 


You're closer to leaming HTML than you think. 


Here's the HTML for the Head First Lounge again. Take а look at the tags and see 
if you can guess what they lal the browser about the content. Wt your answers 
Inthe space on the right: we've already dane the frst couple fr you 


p browser b stark of HTML 
<head> Starks the page Sead! nore abot the ater 
<titlediiead First Loungee/title> 
</head> 
<body> 


Mhi»Helcone to the Head First Lounge«/hl» 
<img src-"drinks.gif"» 
<p> 


ening for refreshing elixirs, 
conversation and maybe a gane or 
two of <em>Dance Dance Revolutione/em». 


Wireless access is always provided; 


BYONS (Bring your own web server) 
</p> 

<h2>Directions</h2> 

<p> 


You'll find us right in the center of 


downtown Nebr 
</p> 
</body> 
22 


lle. Come join us! 
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what the markup does 


чш 


<html> Tells the browser this is the start of HTML. 
<head> Starts De page “head 
«title dead First Loungee/title» Gives the page a title 
</head> End of the head 
<body> Stark of the body of pase 
MbisHelcone to the Head First Loungee/Bl> Tels browser that Welcome to,” a heading, 
<img sro="drinks.gif"> Places the image “drink gif” here 
<P> Start of a paragraph 


Join us any evening for refreshing elixirs, 
conversation and maybe a game or 


two of <em>Dance Dance Revolutionc/em>. Puts emphasis on Dante Dante Revelation 


Wireless access is alvays provide: 


BYONS (Bring your own web server]. 


</p> End of paragraph 
<h2>Directions</h2> Tale the brower that. "Diretto ie a 
sides 
<> 
Start of another paragraph 
You'll find us right in the center of 


downtown Webville. Come join us! 


ч» End of paragraph 
</body> End of the body. 
</html> Tells the browser this is the end of 
the HTML. 
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Your big break at Starbuzz Coffee 


Stabes Coffee has made a name for itself as the fastest 
one on your local 
other one 


growing сойее shop around, I you've sec 
corner look across the street—you'l se 


In fact, they've grown so quickly they haven't even man 
ige yet. and therein lies your big break: By 


to put upa weh 


the language of the web 


а 


chance, while buying your Starbuzz Chai Tea, you run into 


the Starbuzz CEO, 


Word has it you 
know a little about HTML, 
We really need a web page 
that features the Starbuzz 
offerings. Can you help? 


( 


The tber 


weran 
POWER 


[A Give dog a bath. 


О B. Finaly get my checking 
account balanced 


Decisions, decisions. 
Check your first priority below (choose only one): 


07 C. Take the Starbuzz gig and 
launch BIG-TIME web career, 


О D. Schedule dentist appointment. 
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page 


glod you 


our first 


Wonderfull Were so 


Here's what we need on 


be helping us * 
page 


m 
Tod For eee 


tw cde ба 
| and deste hori 
in [ЖИЛ nu. 
i — "m = 


Take a look at the napkin. Can you 
determine the structure of #? In other 
words, aro there obvious headings? 
Paragraphs? ls i missing anything Ike a 
ще? 

бо ahead and mark up the napkin (using 
your penci) wilh any structure you see, 
and add anything that is missing. 


‘Yul find our answers at the end of 


aie your penal 


atte 35 
m © 


apes, бей wi ps! 
ar Bam da tm ЭЕ 
| „йыт 


* IE by chante you those option А.В, or D on the previous 


ate, we retommend you donate this book to 2 good librar 


10 


ме ik as kindling {his winter, or what the heck, go ahead 
ard sell it on Amazon and make ıene tad 
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Creating the Starbuzz web page 


Of course, the only problem with all this is that 
you haven't actually created any web pages yet. 
But that's why you decided to di 

HTML, right? 


on the napkin. 


Open the file "index.html" in your favorite browser 
step back, and watch the magic hay 


No pressure, but thousands of 

people are going to visit this web 

роде when you're finished, Tt not only. 

needs to be correct, is gotta look 
great, tool 


writing html on э macintosh 


Creating an HTML file (Mac) 


All HTML les are text files, To create а text fle, you 
need an application that allows you to create plain text 
without throwing in a lot of fancy formatting and special 
characters. You just need plain, pure text, 


Wé use TextEdit on the Mac in this book; however, if 
you prefer another text editor, that should work fine as 
well And, if you're running Windows, you'll want to skip 
ahead a couple of pages to the Windows instructions 


Step one: 
Novigate to your Applications folder 
"The TextEdit application is in the Application 
folder The easiest way to get there is to 
choose New Finder Window fom the Finder 
File menu and then look for the Application. 
directly in your shortcuts, When youve found. 
it, click on Applications, 


Step two: 
Locate and run TextEdit - 
You'll probably have оз of applications ted Heres THEE 


in your Applications folder, so scroll down until 
you see TextEdit. To run the application, 
double-click on the TextEdit icon. 


Step three (optional): 
Keep TextEdit in your Dock 
I you want to make your Ше easier 
lick and hold on the TextEdit icon in 7 Yep Dek 
the Dock (this icon appears once the ELMO 
application is running). When й displays 
a pop-up menu, choose Options, then 
хр in Dock "That way, the TextEdit 
icon will always appear in your Dock 
and you won't have to hunt åt down in 
the Applications folder every time you 
need to sei 
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Step fou 
Change your TextEdit Preferences. 
By default, TextEdit is in “rich text" 
mode, which means it will add its own 
formatting and special characters 
то your fle when you save it—not 3 
what you want. So, you'll need to E 
change your TextEdit Preferences so This 


tert, formatting men 


that Tent ver pour workasa mein куне meh to 
pore tex eT i ft nse жы" 
the Preferences menu tem bum the You need L. change yore 
"Tex Edit uem. referees n 


Step five: 
Set Preferences for Plain text 
‘Once you see the Preferences dialog 


box, there are three things you need 
todo. 


First, choose “Plain text" as the 
default editor mode in the New — — 
Document tab. 


Inthe "Open and Save" tab, make 
sure “Ignore rich text commands in 
HTML fles” is checked. 


Last, make sure that the "Add xt 
extension to plain text files” is 
unchecked. 


“That's it; to close the dialog box, 


liek on the red button in the top- 
left corner 


Step six: 
Quit ond restart 
Now quit out of Test by choosing 
Qui fom he TextEdit menu, and then 
restart the application. This time, you'll See the formatting mene 
же a window with no faney ext formatting got tht mein were 
menus at the top. You're now ready to create ent mode. 
some HTML. 
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Creating an HTML file (Windows) 


1 you're reading this page you must be a Windows 7 usc IF you're not, 
you might want to skip а couple of pages ahead. Or if you just want to sit 
in the back and not ask questions, we're okay with that too. 


De another version of Windom 


То create HTML files in Windows 7, we're going to use Notepad—it ships ee sing et 
МАЕ every coy of Windows be ps rie d asy I Ere eden ye 
... Мадди 7, that's fe oo; NY ere wl 


just make sure you ean create a plain-text file with an “hum” extension, 


Assuming you're using Notepad, here's how you're going to create your 
first HTML file. 


Step one: 
Open the Start menu and navigate to Notepad. 


You find the Notepad application in Ase, The 
cient wey to get here is to click on the Start menu, then ^ 


оп All Programs, then Accessories, You'll see Notepad 
listed there. 
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Step two: 


Орел Notepad. 
Once you've located Notepad in the 
Arcis folder, go ahead and click on 
it, You'l sce а blank window ready for 
you to start typing HTML. 


But vetonmended 


Step three (optional 
Don't hide extensions of 
well-known file types. 


удаа Wine igri 
Frame нде raters 
. 
e DIN 
ЕБЕ 
e — m 
„ ip nomm 
Көне чк dede 

eT fedi 

355 
т 

nics a EVE ûk i Kai 
ee 
e 
с 

тыну быз айк ûk êê a 
аку 
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editors and html 


16 


there are no 
mb € Questions 


Dum! 


О: иу am tusing a simple tort eater? 
Hit here powerful tools Ке Dreamweaver 
and Expression Web for creating web pages? 


Д: voute roning is boot bec you want 
bee eects sd eb 
pagas, it No se a al groat ois, but 
Б oso wat rou ana unl jo 
атаны of TL and CES jo waren 
tot ptm ya way 


‘Once youre a master, however, hose tools do 
prose some nice features Ike syntax checking 
and previews. At hat point when you view he 
"eode" window, youll understand everyting in iL. 
and you fnd that changes to the raw HTML and 
CSS are ofen a lot aster than going through a 
usor interlace. Youll iso fird that as standards 
change, hesa tools aren't always updated right 
акау and may not support the most recent 
standards unti ir пе release cycle. Since 
youl know how lo change е HTML and CSS 
"tout he tool, yo be able to keep up wih the 
Ins and greatest all the time. 


There are many more Шу featured ers that 
includ great features Бе cips (for automaticaly 
Inserting bits of HTML you wile өп), preview 
(lor previewing directly ha edlor bere you 
lestin ho browse), syntax coloring (so tags are 
a diferent color from content), and much more. 
Once you get he hang of writing basie HTML and 
CSS in a simple editor, it may be worth chacing 
‘ut one of he fancier editors, such as Coda, 
Teste, CofoeCup, or Aptana Studio. There 
эе many oul tere to choose from (bo free and 


Д: Te singlo answer: use wate љоне 
уйа V a OS are sty tona 
S maana mat a bowser yo шур 
IIL ana CS n e sane way strat xe 
You ara Leng he vet versen lh over 
— 


The complex answer: in really there are slight 
ferences in ha way browsers handie your 
pages. I you've got users who wil be accessing 
Your pages п a variety of browsers, hen aways 
lest your web page in several diferent browsers. 
Soma pages wl ok erac the same; some 
wont. The more advanced you become 

With HTML and CSS, е more these sight 
‘ferences may matter lo you, and we get into 
some of these suites throughout he book 


Any ol he major browsers Inemat Explorar, 
Соте, Fior, Opera, and Sari wi work 
foc most examples (except where nolo] hey 
же all modem browsers wh great HTML апа 
CSS support And as a web developer, you 

be expecied to lest your code п mora ап one 
browser, so we encourage you to download and 
get familar with at least mot 


О; ro creating these les on my own 
computer tow am I going view these on 
ewe? 


Д: Tats one grea ig tea you 
at anana tie ana as fancy oun 
cing ann ir plan treman He 
Wat. no, ete oe o wory stou ow 
treat e tias and anat goes n bam We 
Eoma back to geting en o те Web b 
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Meanwhile, back at Starbuzz Coffee. 


(Okay, now that you know the basics of creating a plain-text file, you just 
need to get some content into your text editor save it, and then load й into 
your browser 


Start by typing in the beverages straight from the CEO's napkin; these 
beverages are the content for your page You'll be adding some HTML 
markup to give the content some structure in abit, but for now, just ger 
the basic content typed in. While you're at it, go ahead and add “Starbuzz 
Coffee Beverages" at the top of the file. 


Type in the info From 


коба Fe Lattes SR act 


ERN] 
SRL e i ыш with back saa, spices, ne ad c 


eoo United den 


Shorts биге Beverage 


коле Blend, лз 
шө, WILA bens et coffees Fren Nexen, Bolivia ne dere. 


Yecha Cafe Lathe, $2.55 Windows 


йит, $5.80 


shat Taa, Sts 
„^^ A spicy drink node with black ten, apices, milk ard honey. 
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Saving your work 


Once you've typed in the beverages from the CEO's napkin, you're going to 
save your work in a fle called "index html”, Before you do that, you'll want to 
«гене a folder named “starbuzz” о hold the site's es 


"To get this all started, choose Save from the File menu and you'll ee a Save As 
dialog box. Then, here's what you need to do: 


Chak here to Я 
First, create a "starbuzz" folder poc Nodes 
for all your Starbuzz-related X 
les You con do This with the 


New Folder button. 


When you save, make swe UTF-@ Don't worry belt 
is selected for the encoding on UTP-8 for nowi 
both Mac and Windows well dome back be 


Create à rew 
Folder here 


@ Next, click on the newly created 
‘starbuzz" folder and then enter 
"index html” as the filename and click 
‘on the Save button. 


Chek do save 
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Opening your web page in a browser 


Are you ready to open your first web page? Using your 
favorite browser, choose “Open Fil..." (or "Open..." 
using Windows 7 and Internet Explorer) from the File 
menu and navigate to your “index bim" file. Select it 


and click Open 
о, бе Ma. nage to oor 
File and select & by tho 
оп the File iton and then on 
“the Open button 
m a n fen Internet Explorer i 
a two-step protese. First, yo 


eb the Open dialog box. 


= 


Then ciek Browse to get a 
bronce dialog and navigate to 
where you saved your Ple 
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testing your him! 


Take your page for a Windows 
test drive gga M 


Success! You've got the page loaded in 
"he browser, although the results are 
a lile... uh. satisfying, But that's 


jt because dl you've dane sor go fae rears 


through the mechanics of creating a page 
and viewing it in the browser And so 

far, you've only typed in the cantent of the 
web page. Thats where HTML comes 
in. HTML gives you a way to tell the 
browser about the racine of your page. 
‘What's structure? As you've already seen, 
it is a way of marking up your text so 
that the browser knows what's a heading, 
what text isin a paragraph, what text ix a 
subheading and so on. Once the browser 
knows alite about the structure, it can. 
display your page in а more meaningful 
and readable manner 


Depending on your operating system and 
browser, often you can just double-click 
the HTML file or drag it on top of the 
browser icon to open it. Much simpler. 
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(os \ Markup Magnets 
ОЗ So lets add tat structure. 


Your job is to add structure to the text from the Starbuzz napkin. Use 

the fridge magnets at the bottom of the page to mark up the text 

so that you've indicated which parts are headings, subheadings and 
paragraph text. We've already done a few to get you started. You won't 

need all the magnets below to complete the job; some will be left over. 


tarbuzz Coffee Beverages 


House Blend, $1.49 


A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala 


TuS 


Cappuccino, $1.89 
A mixture of espre 


Chai Tea, $1.85 
A spicy drink made with black te 


apices, milk and honey. 


„Ё 


Use Bia na t \ ) 
н А mm 
heading Use t bee this magnet Беда yet do berda — 
e end aheadng hp tart a shades arta paragraph 
subheading paragraph i 
5 


ebooks.nfo. 


your first htm! markup 


Congratulations, 
® you've just written 
your first HTML! 


"They might have looked like fridge 
magnets, but you were really marking up 
your text with HTML. Only as you шом; 
же usually refer to the magnets as gs, 

Check out the markup below and compare it 10 
your magnets оп the previous page: 


— 
(a the > and «А tay ta wat 
te tert m ee а 
debe content of the майну 


abuse Coffee Beverages ЫШЫ 


[ Blend, пл LS The em 

se around a subheading 
‘Think of an <hZ> heading 
as a subheading of an <> 
heading 


BBA smooth, mild blend of coffees from Mexico, Bolivia 


id Guatemala. 0р] 


BBBMocha Cafe Latte, 52.35 ЫШЫ 


[iiepresso, steamed milk and chocolate syrup ЖШ 
The <p> and </p> las 
eee, . n уе around 3 block of 


tent isa para 
BBA mixture of espresso, steamed milk and foam EH fiat at a paragraph 
— er way 


sentences 


[7 —] 
HBA spicy drink made with black tea, spices, milk and 


honey RIBS 
Notie tat yos don't hive te pt matching tag 


on the tame ine. You can pu a: me t 
Yee e Pte eh tentant a 
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the language of the web 


Are we there yet? 


You have an HTML fle with markup—does that make a web page? Almost, 
Youve already seen the <html>, <head>, <title>, and <body> tags, and 
we just need to add those to make this a first-class HTML page. 


afhead> tags The 
рүң, aren you TL ea a Ае d = pna 1 
with ыр d </html> head Contains information A about it head and pot a title 
Tage Thie tells the browser page, like its title: Fer now , A Ge at T ne ble 
e te ken Pr the head allows you to te inside the hea 
p uad Se bg dod the web vto voll appears at the 
Mey Trower ings abot v e onde 


p 
om The head гөм oF the <head> 
etitlesstasbuss coffee</titie> {аб oy and everything 
К 9 
аар 
@istarbuzs Coffee neverages</hi> 
адэнозве Blend, $1.49</n2> 
“аА smooth, mild blend of coffees from Mexico, 
Bolivia and Guatenala-</p> The body consis 
of the <body> 
<haotiocha Cafe Latte, $2.35</h2> { «Љәр tage 
SJ —“?öV᷑ tie 
@apcappuccing, 31.89</n2> 
d mixture of espresso, steamed milk and foam.</p> 
<eapchai тез, 51,95¢/h> 
“gon spicy drink made with black tea, apices, 
milk and honey.</p> " 
SEE Кее head 
> p your hea 
. — ‘and body separate 
The body contains all the content and when writing HTML. — 
structure of your web page—the parts of К 
Be web page that ү» Set in Your bee. | | 
you are here > 28 
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another test with som: 


Another test drive zx 


>, < 


i», «title», «/titl 


You tan reload the inden hb 


selecting the Open 


b read button 
by sing your browser's reload 


Now things look a bit better: 

The brouser has interpreted 

md created à 
— 
— 


alg ЖТ 
ry nly more oh 
ae loe radi 
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ding 


<body> and 
Once you've done that, save your 
changes and reload the file into your browser. 


Notite that the title, 
which you specified in 

File by 
item again, or 


Бе <head> element, 
heva up here 


y 


ү 


ES Neteco 
ш пила 


Starbuzz Coffee Beverages 
House Blend, $149 
Mocha Cafe Latte, 8245 


Cappuccino, $1.89 
Chai Tea, $185 
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the language of the web 


Tags dissected 


Okay, you've seen a bit of markup, so let's zoom in 
and take a look at how tags really work. 


You wa 


МА tage around some piete of content 
КОА Tana a to tel De roe tat er 
tortent, te bers Coffee Beverages” is a top- 

level heading (Chat is, heading level one) 


T 
ban the easing t39 
at ende De vid 
ha ease the 0% 


ab 
days ending 
Here's the opening tag 


that begins the heading 


v 
4 0 уе 
0 У И 


ыр toe a 
«hi» Starbuzz Coffee Beverages RE о 
— 


toria, of the tag rame 
Tas tied eee. 
dato the < and > 


The whole shebang а called an element. |» this tate, we 


tän tall i фе <N» element. An element conte of the SN 


ede шу and the rrt b mn 


ard ф беш t33 
vals tag 


To tell the browser about the structure of your 
Page, use pairs of tags around your content. 


Remember: 


Element = Opening Tag + Content + Closing Tag 
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elements and matchin 


О: so matching tgs dont hav lo be 
cath same ine? 


No: remember th browser doesnt 
realy car about tabs, retums. and most 
spaces So, your lags can ап and end 
anywhere on е гате ie, or they can start 
and end on diferent Ines. Just make sure 
уо start wth an opening tag, Ike <h2>, and 
end with a closing tag, Ike <>. 


О: Why do the closing tage have that 
era“? 


Thal‘ in he dosing tag is to help 
bath you and the browsar know where a 
particular pico of structured content ends. 
Otters, the closing tags would ook just 
Wo the opening tags, пун? 


there;are no 
Dumb t Questions 


О; пенен he HTML in some 
pages doesn't always match opening tags 
with closing tags 


А: Wel ta sponta 
icd one do a иу god x 
igno ot atu nen on te 
аттан Bul as ost gg чм, 
the ater wing 
Sly crece Тули койуш! 
tev i fc HM n 
Derr ar cl ls overly yaw 
Siar you pu on ийи 
avtala wed a soa Fert tg 
Tn e rabit aay machy yow рел; 
— 


O wat what about tating 
scr denke iP» tag in he lounge. 
rampla? Di you forget бе closing ад? 


А: von stam qe ere se sane 
sehen hatara corto mito vi 
туе ар Kaap tat n a bac cl ou. 
тийги ou wl еши ад айй» 
— 


el 
OWE 


gere ge panty 
covet any ear have 
Taos inside otne ng? e иф" 
ard вод a da ani gt 


fes, HTML tags are often "naste" 
Ma at И you think about t, 1's natural 
for an HTML page to have a body, wich 
contains a paragraph, and so on. So many 
HTML elements have other HTML elements 
betten their taps. Well take a good look 
al this ind of hog in iater chapters, but 
for now just get your mind noticing hou he 
elements relate lo each ather in a page. 
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‘Tags can be a litle more interesting than what you've seen so far. Here's the 
paragraph tag with a litle extra added to it. What do you think this does? 


<p id="houseblend">A smooth, mild 
blend of coffees from Mexico, Bolivia 
and Guatemala.</p> 


the language of the web 


(Oh, forgot to mention, 
we need our company mission 
опа page, too. Grab the mission 
statement off one of our coffee 
‘cups and create another page 
forit. 


sae mission het 


Witte the HTML fer the new 
"mission hin page here. 


Ө туре in your HTML using a text 
ecitar. and save itas “mission. 


himî in the same folder аз your 
index htm fie. 


Once you've done that, open 
"mission him in your browser. 


Check your work at the end of 
е chapter before moving on. 


using css 
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Okay, it looks like youre 

getting somewhere. Youve got the 

main page and the mission page all set. 

But don't forget the CEO said the site 

needs to look great too, Don't you think 
it needs a little style? 


Right. We have the 


structure down, so now 
we're going to concentrate 
h on its presentation. 


You already know that HTML gives 
you a way to describe the structure 

ff the content in your fies. When the 
browser displays your HTML, it uses 
its onen built-in default style to present 
this structure. But relying on the 
browser for style obviously isn't going 
то win you any “designer of the month 
awards 


That's where CSS comes in, CSS €— 
aves you a way to describe how your 

content should be presented, Let's get 

our feet wet by ereating some CSS that 
makes the Starbuzz page look a litle 

‘more presentable (and launch your 

web career in the process later, but for 


he browser how 
shold lok.” PF 


Meet the style element 


"To add style, you add a new (say it with us) E- 
to your page 
main Starbuzz page and add some чуй. 


beck it out 


ena 
€ 

tities: 

«style types"text/ess"> 


Blend, $1.49¢/n2> 


>A smoot 
Guatemala </p> 


EMENT 
the <style> element. Let's go back to the 


— 1 
d of yor el 
at ie other elements the <style> 
екет hasan opening tag, cibos 

ard à toin 


о 


ЕС 


Coffee Severagese/hl» 


the language of the web 


ia laced wide the 


«Ае. 


je» tag ale has an (optional) 
which tells the 

syle youre sing 

ме CSS, you tan 


Визге you're tng 
көйү the “tet 


fad heres whee yore 
nto define Be hs 
or the fer 


, mild bland of coffees from Mexico, Bolivia and 


hd>vocha Caffe Latte, 62.35¢/h2> 
<p>Espreaao, steamed milk and chocolate ayrup.e/p» 


<h2>cappuccino, $1.89</h2> 
<P>A mixture of espresso, 


schal тез, 


779 


<P>A spicy drink made with black tea, spices 


</body> 
</a> 


ther 3 
qb Questions 


Dumi 


Dye E T 
pot 


А: ины gvo you avay ro ator нити п 
tir ear Lio буш иеа dot he an 
шаш о ау айу valine әйе aga 
{arn eaa nor tbs ar man и 
‘enna Gh me nano ato eee 


teamed milk and milk foam.</p> 


milk and haney.</p> 


О); Why do 1 have to specity the type of the style texas") 
28 an atribute of he ув? Ал there other kinds se? 


Д: нәме ine desert TI Hough hee woua be 
эби ауы, at шт cul wee al ce sre cr 
Dan and yei can uel a> ий ttd a be 

. 
тода г breat rb <a расов зуе Отта! 
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adding 2 style element 


Giving Starbuzz some style... 


Now tat you've got cotes clement inthe HTML bead, ай yu ned to 
боиы киш CSS othe page a Tede plaza Bey ol fd ore 
CSS already “bake” бе you. Whenercr you we the (ee Jom jm 
seeing HTML and CSS ia yon shoud ype in aris, fat. Vr am how 
{ie mus work le айо Jue een what ean d, 


So, take look at the CSS and then add it to your “index heml" file. Once 
you've got it typed in, save your file. 


background-color: Вальаве; 
margin-left: 208) سے‎ 
margin-right: 20%; 

border: 2px dotted black; 
padding: 10px 10px 10px 10px; 


CSS ues э syntar that 


font-family: sans-serif; „шу different 
П from HTML 
</style> 
</head> 
body» 
<h1>starbuzz Coffee Beverages</h1> 


<h2>iouse Blend, $1.49</h2> 
Ses smooth, mild blend of coff 
Guatemala </p> 


hd>vochs Caffe Latte, 82. Sea, 
phtsprenso, steamed milk and chocolate syrup,e/p» 


<h2>cappuccino, $1.89</h2> 
<P>A mixture of espresso, atean 


ed milk and milk tea. er 


<h2>chal тез, $1.85</h2> 
<p>A spicy drink made with blaci 
</body> 
</a> 


k tea, spices, milk and honey.</p> 
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the language of the web 


Cruisin’ with style.. а= 


ime for another test drive, so reload your "index humi" file again. 
‘This ime, you'll see the Starbuzz web page has а whole new look. 


Background color is now tan 


Now we have margins 
around the content. 


Weve get a black dotted border 
around the content 


There's ем зоте 
[o 


2 
P Irae 
(ан all ides) 


We've vina 
different font for 
a cleaner ook 


If you're using IE, 
you might not see 
the border. 
Watch it! intemet Explorer. 
i does not display the — 
border around the body correctly — 
1 ту loading the page in Firefox, 
Chrome or Safari to see the border. 


Whoal Very rice. We're 
in business now! 
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looking more closely at ess 


Ka e wad 
WHE DOES WHAT? 
Even though you've just glanced at CSS, you've already begun to see 
What t can do. Match each ine in the style definition to what it does. 
background-color: #42Ы4! Defines the font to use for text. 
жайыш: tons ойе а border around the body that is 
margin-right: 20%; dotted and the color black, 
border: 2px dotted black; Sets the left and right margins te take up 
20% of the page each. 
ating: 10px 10px 10px 10px; O Ses the background color f tan 
font-family: sans-serif; Creates some padding around the body of 
the page 
iere are no 


Dumb Questions 


Obstet stot strat YH hal because each rae С): yy ihr odin tontor 
language tan Hy hve mo Sagi doas i Ak ge Cag cra dent mean? 
танаро? Тыш тиз пт з ‘eno 
вәт, бам? Д: т-у te CSS means mat at 
; "hé CSS tween Te "(and ароз 
Chismes tun ts eet So 
CSS are conpety fun languages, жеп you se te font lo sans youre 
bul alls because hey have vey derert A. yng hal ela font win tha body ol 
foe lieye wean oleh dM 
. 
. calad a "hax coda; Wal Wel go into a io mere delal abou how 
T. ° is. This realy is lan color Focnou, just 0 CSS nos soriy, so keep reading Soon, 
. tions Wh and vel be showing you eraely how yel ste tat you can be a let more рейс 
mea you need Io атмо languages, belege fg. boul hon you apply hese nes, and by 
бпр so, you can ce some ety cool 
dos. 


А: vouar at ata 


32 


www it-ebooks.into 
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Exercise 


Now that you've put a litle style in the Starbuzz "index him! page, go ahead and. 
update your "isson.htm/ раде to have the same style. 


Ө Wit the HTML for the “mission him page below. and then 
айа the new CSS. 


Ө Update your ‘mission hif fle to include the new CSS. 
Ө once youve done that, reload mission him in your browser. 


Mako sure your mission page looks ке ours at the end of the 
chapte 


on. rn 
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content and style 


Fireside Chats 


9 Gg Tonight's talk: HTML and 088 on content and style 


HTML 


Greetings, CSS; Г glad you're here because Ive 
been wanting to clear up some confusion about us 


Lots of people think that my tags tell dhe browsers 
how to фуу the content Is just not tue! Ги all 
about structure, not presentation. 


Wall, you can sce how some people might get 
confused; after all, t's possible to use HTML 
without CSS and sil get a decent-looking page, 


Hey, I'm pretty powerful too. Having your content 
structured is much more important than having it 
look good. Style is so superficial; its the structure of 
the content that matters 


Whos, what an ego! Well I guess I shouldn't expect 
anything else from you you're just trying to make 
a fashion statement with all that style you keep. 
talking about 
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css 


Really? What kind of confusion? 


Heck уезі don't want people giving you credit 
for my work! 


"Decent" might be overstating it a bit, don't you 
think? I mean, the way most browsers display 
straight HTML looks kinda crappy: People need 
to learn how powerful CSS is and how easily Lean 
aive their web pages great style. 


Get real! Without me, web pages would be pretty 
damn boring: Not only that, bur take away the 
ability to style pages and no one is going to take 
your pages seriously Everything is going to look 
Clumsy and unprofessional 


www it-ebooks.info 


Right. In fact, we're totally different languages, 
which is good because 1 wouldn't want any of your 
style designers messing with my structure elements 


Yeah, that is obvious to me any time I look at 
(CSStalk about an alien language. 


Millions of web writers would disagree with you. 
Туе gota nice clean syntax that fits right in with the 


Hey ever heard of closing tags? 


Just notice that no matter where you go, Туе 
aot you surrounded by <style> tags, Good luck 
‘escaping! 


the language of the web 


Fashion statement? Good design and layout can 
have a huge effect on how readable and usable 
pages are. And you should be happy that my 
Texible style rules allow designers to do all kinds 
of interesting things with your elements without 
messing up your structure. 


Don't worry; we're living in separate universes 


‘Yeah, like HTML can be calle a language? Who 
has ever seen such a clunky thing with all those 


тар? 


Jost take a look at CSS; it's so elegant and 
‘simple, no goofy angle brackets <around> 
“<everything>. <See> <I> <can><talk> 
<just><like><Mr><HTML><,><lok><ai> 


Hat ГЇ show you., because, guess what? I can 
escape, 


sea 


you are here + 
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review of basic html and ess 


Not only is this one fine cup of 
House Blend, but now we've got 
а web page to tell all our customers about 
‘our coffees. Excellent work. Гуе got some. 
bigger ideas for the future; in the meantime, 
can you start thinking about how we are. 
going to get these pages on the Internet so 
other people can see them? 


ae POINTS 


HTML and CSS are the languages we use to create 
web pages. 


"= Web servers store and serve web pages, which are 
created from HTML and CSS. Browsers relieve 
pages and render their content based on the HTML 
and CSS. 


„ HTML ап abbreviation for HyperText Markup 
Language and is used to structure your web page. 


= CSS is an abbreviation for Cascading Style Sheets, 
and is used to control the presentation of your 
HTML, 


. Using HTML, we mark up content with tags to 
provide sucre. We сай matching tags, and their 
‘encased content, elements. 


"= An element is composed of three parts: an opening 
tag, content, and a closing tag. There are a few 
elements, Ike <img>, that are an exception to this 
ме. 


= Opening tags can have attributes. We've seen one 
already: type. 


Closing tags have a after the left angle bracket, 
in font of the tag name, to distinguish them as 
closing tags. 

Your pages should aways have an «imb» element 
along with a <head> element and a <body> 
element 


Information about the web page goes into the 
«head» element 


What you put into the «body» elementis what you 
see їп he browser. 


Most whitespace (tabs, retums, spaces) is ignored 
by the browser, but you can use itto make your 
HTML more readable (to you). 


You can add CSS to an HTML web page by 
puting the CSS rules inside the <style> element. 
The <style> element should always be inside the 
<head> element. 


You specify he style characteristics of the elements 
in your HTML using CSS. 


HTMLeross 


tho language of the web 


Jes time to sit back and give your left brain something to do. I's your 
standard crossword ай af the solution words are from this chapter. 


Across 

2 The “Min HTML. 

8. Tags can have these to provide additional information. 
10. Browsers ignore this. 

12. You define presentation through this element. 

13. Purpose of <p> element. 

15. Two tags and content. 

17. What you see in your page. 


18. We emphasized Dance. Revolution. 


Down 


1. There are six of these. 

3. CSS is used when you need to contral this. 

4. You mark up content to provide tis. 

5. Appears at the tap ofthe browser for each page. 
6. Style we wish we could have had. 

7. Company that launched your web career. 
Only ype of syle available, 

. Always separate these in HTML. 

14 About your web page. 

^16 Opening and closing. 
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exercise solutions 


Sin 


Go ahead and 
and mark up the 
Sinik jui sho napkin (using your penai 
aram anf add унт атр о 


Nek going to be part 
K n 


paaa petet 
| саал Coffee ard 
Beverages 
КЕ dose Blend f е 
олова ا ا‎ ыз cafus ее Mein BORE 
\\ and Guatemala. 
oe nE Cafe Latte 12: 5 
ке ade med wik en ecl set ye e 
ina a a 
pere БӘ", [ тенә, баат mik ad foam 
NES hes 
кже drink made к dea, seen milk and honey 
Chapter 1 
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| — 


the language of the web 


(cei Markup Magnets Solution 


Your job was to add some structure to the text from the Starbuzz 
napkin. Use the fridge magnets at the bottom of the page 

to mark up the text so that you've indicated which parts are 
headings, subheadings, and paragraph text. Here's our solution. 


Га Jose siena, s1 асу 


eee, о [2> J 
E 
ra 


[S Jonas тез, 2.05 
spicy drink mall Vi black tan, apices, milk and honey. 
لحا‎ 


Beverages 


from Mexico, Bolivia and 


( 


Leftover mapet 
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exercise solutions 
eae mssen h 
‘<html> 


<head> 
<title>starbuzz Coffee's mlssion</title> 


</head> 


<body> 
озатын 


Coffee's missione/hi> 


all the caffeine that you need 


«poro provi 
power your Lite.</p> 


er drink it.</p> 
</body> 
p 


Here's the HTML: 


Starbuzz Coffee's Mission 


To proie he геле hat you end to power your ite 


po: 


UM 
displayed in a brower. 
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the language of the web 


Here's the CSS in the 
mision pase چ‎ 


les ps lope Or ar- 
u ee 


П 
bes 
m 
аар 
<hl>Starburz Coffee's Mizsionc/ai> 


чөө provide all the caffeine that you need to power 
your dieci 


рее 
оду» 
enm 


Neu the style mates 
die main Саа. page 


G 
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exercise 


Wwe bor wuar 


Even tough youve a дыкан а CSS, youve sed) sun De tegi ot 


кеке, alan Mah eae ete si denon al do 


Defines the font ise for text 
. 


m: 


NS 
\/ mens 


viste 


от of the page each. 


Балалар: 10px 10pm 10pm зери 


Creates seme padding around the 
bady o the page- 


H MAR КОРР 
g g R ынаа 
F'A[T|T|R|T|B|U|T|E|S Thom aT 
DR g "WHITESPACE 
i U HEBEL agoa UU K 
N G N JI HB Û ы 
9 T T b чое 
g Û PARAGRAPH 5 Z 5 
R OH T N a H g 
ELEMENT I b H 
B BI вору 
D 6 N o 
5 DANCE 
y 
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2 going Surther with hypertext ж 
*Meeting the “НТ” іп HTME 


Right, thats me, they B Youre not listening 
call me Hyper Ted. | 


Т came here to meet 
Hyper TEXT! 


Did someone say “hypertext?” What's that? Oh, only the entire 
basis of the Web. In Chapter 1 we Kicked the tires of HTML and found ito be а nice 
markup language (the "ML" in HTML) for describing the structure of web pages. Now 
жете going to check out the HT" in HTML, hypertext, which wil let us break free of 
а single page and link to other pages. Along the way мете going to meet а powerful 
пен element, the <a> element, and leam how being “relative” is a groovy thing. So, 


fasten your seat bots youre about to leam some hypertext 
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improving the head first lounge 


Head First Lounge, new and improved 
Remember the Head Бан Lounge? Great st, bet woul it be nce 


customers could view a list of the refreshing elixirs? Even better, we should 
give customers some real driving directions so they can find the place. 
EL d 


[киз єлє 


tees the new ‘Welcome to the New and Improved 
eet Head First Lounge 


zu 
: 
LEL 


Jead Fiat Lounge 


-— 
asap tits 
шы 


Weve added 

i. و‎ ges کک کا‎ eee, 
new pages ne) Û woof Dance Dante Reon: Wile жов sch pide 

ber фейз and BYOWS (Bring Your Own Web Server). 

cone far driving, 

avere Directions 


Youll find us right in the center of downtown Webvile, 1f you пе help 
finding us, check out ош detailed direstions, Cone join ш! 


E Tie detailed directions 
= ok leads do an HTML. page 
Directions sath deining динден 


direċtiont henl 
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| Raspberry Ice Concentration 


| шыша ашыл ae no ele ela 


| 
| Cranberry Antioxidant Blast 
| 


Cochise тенеу зи эй нил esas pel nnn. i 


esie п fenhen isst ишт Ce 


going further with hypertext 


‘pase lating ome 
Heben aed el 
Jes Fed Free to arab 
tne before Sein ө 


Creating the new and improved 
lounge in three steps. 


Lets rework the original Head First Lounge 
page soit inks to the two new pages. 


Ө Trent steps cary became wee aay 
treed the Гассан nl” and 
— fles fo 
уоп. Yo find them eu 
Inthe sure fe or 
the bon, hich are 


available at http: //wickedlysmart con 
hthtmleas, 


Ө Nex! youre going edi the “lounge i 
fle and add in the HTML needed t link to 
‘directions hal” and “elixir htn" 


Ө Le youll give the pages a test drive and 
ary out your new links. When you get back, 
west down and look at how it all works. 


Flip the page and let's get started. 
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looking at the source files 
Creating the new lounge 


Ө Crab the source files 
| 


Once you've downloaded them, look under the folder “chapter? lounge 
find “lounge аар", iger тїї”, and "directions heml" (and a bunch of 


PEE 


те new files, already 


then for you бо 
ahead and take а 


peek yos already know 


everything you reed ba 
understand them. 


AI e lange files Э 
Mein a Rider 


dnd here 
images needed 
For our new and 


The Head First Lounge is already growing; do you think that keeping ай the site's files in а 
single directory is a good way to organize the site? What would you do differently? 
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going further with hypertext 


Edit lounge.html 


Open “lounge-hunl” in your editor, Add the new text and HTML that is highlighted below. 
Go ahead and type this in; we'll come back and see how it all works on the next page 


E 
<head> „ 
add "New ard Improved" to the ade 
<title>iead First Loungee/title» айы ш 
</head> 
оду 
hiwelcome to the ЖЕНЕВЕ ВА нез Firat Lounge</h1> 
tig abort аля річ» Here's where we add the HTML for the fink to the 
+» ант 
beste Inks ye ме the 
refreshing ЕНЕНЕ НЕНЕН АЗ rel well Lake a 
conversation and maybe a game or two of lode at how this element 
<em>pance Dance Revolution¢/en> workin jut à t. 


wireless ac 


аяз 19 always provided; 


BYONS (Bring your own web server] ааыл 


м ч 
үрүн 
— bar bo dete 
= 
M EE SaaS 
ч» T 
pn 

Pm fr hers wher wad —€ 


<p clement 


Save lounge.html and give it a test drive. 
‘When you're finished with the changes, save the fle Чошу азі" and open it in 
your browser Here are a few things to пу: 

© Click on the elixir linkk and the new ch page will display 


0 Click on the browser's back button and "lounge hl" 
should be displayed again. 


0 Click on the directions link and the new directions page 
will display- 
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how to create link: 


Okay, I've loaded the new 
lounge page, clicked the links, 
ола everything worked. But I 
want to make sure I understand 
how the HTML works 


the Scenes 


What did we do? 


O Lets step through creating the HTML links, First, we need to put 
the text we want for the link in an <a> element, like this 


<a>elixirs</a> <a>driving directions</a> 
Y A ^ ^ 
The <> len аага em 
ale a link to another pon ‘the browaer, the link text appears with an underline to 
“ш indicate you can chek on i 
O Now that we have text for the link, we need to add some — 
HTML to tell the browser where the link points to: For thnk the roe il 
— ir De le ү Bat 
c e clicked, vill take the er 
<a href-"elixir.html"»elixirsc/a» Vo the cher hnl” page 


The bref iles 
how you өгү Û ‘And For Dis link, the browser will display a 


dentin of the Ink ving неее nk that, when cel vil 
\ 


rye 
<a href="directions.html">driving directions</a> 
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going further with 
What does the browser do? 


Behind | 
First, as the browser renders the page, if it encounters an «a» 
element, it takes the content of the element and displays it the Scenes 
as a clickable link 


lixir.html">élixirs</a> 


Welcome to ie New and Improved Head First 


Lounge 
E TTA 


<a href="directions.html">detailed directions</a> 


Use the <a> element to create a hypertext link to another web page. 


The content of the <a> element becomes clickable in the web page. 
The href attribute tells the browser the destination of the link. 


E 
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how links work 


O Next, when a user clicks on a link, the browser uses the "href" 
attribute to determine the page the link points to. 


EE — = 
Welcome to the New and Improved Head First 
Lounge 


‘oat ig etn cerae и mate a pume or o of Dane Dane 
‘esa, Nie co е нут oie B YOWS (bse Year Own Wende 


“The user leks on either the 
"eli link or: 


— 


im “detailed directions” 


— 


Directions 


CX 


— 


If der, vas cheked, the 
browser grabs the href vale 
ert 


<a hrefe"elixir. html ">elixirs</a> 


and displaye the 
“arb page 


When "detailed directions" g 
дей, De brewer grabs the 
ale of the href atrii, in 
‘hs eae derben -f 
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going further with hypertext 


Understanding attributes 


Attributes give you a way t specify additional information about 
an element. While we haven't looked at attributes in detail, you've 
already seen a few examples of them: 


The type attribute specifi 
a f 


language ve re using, in Ehi 


The href attribute tells us the destination of a hyperlink 


irule.htmi"> É 


Я The sre attribute specifies the fi £ 
totogi RE fete 


Let's cook up an example to give you an even better feel for how 
attributes work 

What if «cac were an clement? 

If <сак> were an clement, then you'd naturally want to write some 


жүнүн With no attributes, all we can ply 


descriptive name For the car 


<сагэму Red Mini</car> 


ake Р эмге the element with 


crit dest ell us the make, precise ede wieder a u 
convertible, ora zillion other detail we might want to knew Во, Т all kinds of information 
ears were really ап lemen, we might use abuts ke di | 


Seer make="Mini" model-"Cooper" convertible="no">My Red Mini</car> 


Better, right? Now this markup tells us a lot more information in 


ап eaty-to-write, convenient form. 


SAFETY 
тыт 


Abts are always written he X 

seme way [ri comes бе alle Pl A 
сале, flowed by an equal ign, and hen the feat 
люде valo surrounded in double quotes. 


Do this (best practice) 


Great Movies</a> 


SIM a 
A gabe vt 


attribute vale 


ible nane dae 


You may see some sloppy HTML on the Web b 

that leaves off the double quotes, but don't get 

lazy yourself. Being sloppy can cause you a lot Not this 

of problems down the road (as we'll see later in <a href-topl0.htmi»Great Nov 
the book] No dosble quotes around the attribute de 
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attributes эл elements 


there ire по 


Dumb Questîons 


О; can just nake up new tite tor an HTML 
lament? 


Wb browsers only know abouta predefined set of 
atibus lor each element. you just made up abuts, 
then browsers won ком what o do with hem, and as 
youll see ater in he book, doing this wil very Меў get you 
into trouble. When a browser recognizes an element or an 
аце, we ike to say hat It “supports” that element or 
attibute. You should oniy use aufs that you know are 
supported. 


That said, for programing web applications (ће subject 
ot Haad First HTMLS Programming) НТМ З now supports 
ондоп data atributos thal alow you ю makeup custom 
names lor rew atributos. 


A 


Д: the stars cats ory жой he 
tun nd tes of TM Trese cnn sre rade 


‘The “href attribute is . who generous gue 

pronounced ^h - ref". thet and energy to make sure there's a соттоп HTML 
roadmap that al organizations can use to implement ther 
browsers. 


О: How do iknow what atributos and elements 
are supported? Or can all atributas be applied to any 
lament? 


2 Only certain attributes can be used with a given 
denen Think abouts way: you wouldn't use an atiibute 
‘converte wi e element caseo» would you? So, you 
опу want изе atrautas thal make sense and are supported 
by the element 


Youre going to be learing which airbus are supported by 
which elements as you make your way through the book, Afer 
youve Калай the book, here are lots of great references 
you can use to reltesh your memory, such as HTML & XHTML: 
The Definitive Gud (Rell), 
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going further with hypertext 


Attributes Exposed 
This week's interview: 
Confessions of the href attribute 


Head First: Welcome, href It's certainly a pleasure о interview as hig an attribute 


href: ‘Thanks. Ies qood to be here and get away from all the linking; it can wear an 
attribute out. Every time someone dicks on a link, guess who gets to tell the browser 
‘where до nest? That would be ше, 


Head First: We're glad you could work us into your busy schedule. Why don't you 
tke us back to the beginning... What docs it mean to be an attribute? 


href: Sure. Well, attributes are used to customize an element, I's easy to wrap some 
<a> tags around a piece of content, like “Sign up now!"—we do it like this: <a>Sign 
up now!</2>—but without me, the href attribute, you have no way to tell the «a: 
element the destination of the link. 


Head First: Got it so far. 


href: hun with an attribute you can provide additional information about the 
element. In my case, that’s where the link points to; 

<a hret-*aignup-hta1">sign шр now!</a>, This says that the <a> element, 
which is labeled “Sign up nowt", links to the “signup html" page. Now there are lots 
of other attributes in the world, but lin the one you use with the <a> element to tellit 
where it poins w. 


Head First: Nice. Now; I have to ask, and T hope you aren't offended but what is 
With the name? href? What's with that? 

href: I's an old Internet family name, Tt means “hypertext reference” but all my 
Friends just сай me “href” for short. 

Head First: Which is? 

href: A hypertext reference is just another name for a resource that is on the Internet 
ог your computer. Usually the resource is a web page, but I can also point to PDF 
documents... ll kinds of things. 


Head First: Interesting АП our readers have seen so far are links to their own pages; 
how do we link to other pages and resources on the Web? 


href: Hey 1 gotta get back to work, the whole Web is getting qunked up without me, 
Besides, isn't it your job to teach them this seul? 


Head First: Okay, olay, yes, we're getting to that in a bit., thanks for joining us, href. 
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linking back to the main page 


You've created links to go from ‘lounge hi" to "eli him" and ‘erections him: now we re 
going to go back the other way. Below youl find the HTML for eber hin, Add а nk with the 
Ехейсї$е label "Back to the Lounge” at the bottom of the elixir page that points back to “lounge him’ 


p 

</head> 

<body> 
p 


Lounge Elixirse/title». 


ha>Grsen тез cooler</h2> 
p 
<img srce"green.jpg'» 
Cheek full of vitamins a 


erals, this е! 


combines the healthful benefita of green tea with 
а twist of chamomile blossoms and ginger root 
</p> 

<hô>naspberry rce 
p 


ntratione/a2> 


<img sre"lightblue. 3pg"> 

Combining raspberry juice with lemon grass, 
rus peel and rosehipa, this icy drink 

1 make your mind feel clear and © 


</p> 
<hd>slucherry Bliss Elixire/h2> 
E 


<img arce blue. jpa"> 
Blueberries and cherry essence mixed ini 
of elderflower herb 


еа will put you in 


</p> 
<hĝ>cranberry Antioxidant Blaste/h2> 
<p> 
<img srce"red.ipg"» 
Wake up to the flavors of cranberry and hibtacus 
in this vitamin C rich elixir 
</p> 
</body> 
</html> 


When you are done, go ahead and do the same with ‘directions. html” as well 


going further with 


We need some help constructing and deconstructing <a> elements. Given your nen 
knowledge of he <a> element, we're hoping you can help. In each row below, youl find some. 
combination of the label, destination, and the complete <a> element. Fill in any information 
that is missing. The first row is done for you. 


Destination What you write in HTML. 
m кы <a hrefe"hot.html">iot or Not?</a> 

Resume er ber 
candy ben <a href=" eye Candy</a> 


See my mini |mini-ccoper.html 


let's play <a href-'millionaire.html"» </> 


йыр ло 


Dumb Questions 


О); е seen many pages where | can click on an image rather С) во ean put anything between the <a> tags and willbe 
than tet Can | use the <> element for that? clickable? Like, say, a paragraph? 


. ba <a> —X——Á 


your mage wil be clckatle just ike text. We ra not going o tak le an enlre paragraph. Youîl mostly be using text and images (or 
about images n depth for a few chapters, bul they work just ine аз Бо) wilhin the <a> етеп, but if you need to Ink a <p> or a <h1> 
[o element, you can. What tags wl go inside other tags is a whole other 


"opi but dort wor; we'l get еге soon enough. 


organizing your site with folders 


Your work on the Head 
First Lounge has realy paid 
off. With those enticing elixirs and directions, 
lots of people are frequenting the place and 
Visiting the website. Now we've got plans for 
expanding the leunge's online content in ай 
sorts of directions 


Getting organized 


Before you мап creating more Н 
things organized. So far, we've been putting all our files and. 
images in one folder. You'll find that even for modestly sized 

able if you organize your. 


AL pages, irs time to get 


websites, things are much more mana; 
web pages, graphics, and other resources into а set of folders. 


esce ia eve gr o 
Here are the 
) ree HTML- 
Wee aot a p ded flde Sj duca 
usar" that bold al А. looge, the 
а 


t 


n 


cated ا‎ pon 


oe 
jes in the sike 
PI Y E 22 85 
3 бенен. 
| 
Е 
This is often referred to as the “voot” folder of эшш 


dne sit, which mens ti бе bop level folder m 
ak conti the ene site E B 
E 


1 
rd here are ll De images See, this is e, (m 
setting sorta етей already, and we only 

Ро 


do something abort i 


(em z 

= E 
B 

Have tree page and а fee арыз. Lets ‘oh po 
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going further with hypertext 


Organizing the lounge... 


Let's give the lounge site some meaningful organization now 
Keep in mind there are los of ways to organize any site; we'r 
going to start simple and create а couple of folders for pages 
We'll alo group all those images into one place 


Our voot f 


LEM 


solder is sbil the 


We're going ta leave the 


the oos? falder 


mäin erg html” pase In 


Let's create a folder to 
hold pages about the lounge, 
Ike the & Ы 
ould also add new pages 
here about the management, 
events, and so on 


О; since you have a tolder tor images, 
wi not have anotar one cated "мт" 
nd put al he HTML in that folder? 


А: vou enua. Trae aun ary oret 
жаг ogi yow s a yu 
ant o organze ern ina way бы wots 
Dast ar you and your users As vi ment 
des dacsi, уш vart o core an 
араш senan als ei enough 
хорон vste kanping tings as simple aÈ 
wen 


T 


Well ako ereate a fader 42 hold 
pages about the lounges beverages 
Right now that's just the та, but 
vell be adding more soon 


bereue ge, 
Dumb Questions 


Or why not put an images folder 
in each other folder, Ке “about” and 
"beverages"? 


jain, we could have. We expect hat 
зоте of he images will be reused among 
“several pages, so we put images in a folder 
atthe root (ha top level) o keep hom al 
weber Ifyou have a sile hat needs lots 
of images in diferent parts of the sta, you 
might want each branch to have ls ou 
image folder. 
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т BB 


find els group 
al image 
one folder 


О: staen tci 


А: љалла he nyo 
ara dosente’ yng a 

hen as pte toon 

та Айша 

meiden ў 

path down oe 

ae nc 
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reorganizing and broken links 


Now you need to create the fle and folder structure shown on the previous page. Here's 


‘exactly what you need to do: 


Exercise 


Locate your "lounge" folder and create three new subfolders 
named about, "beverages", and "images" 
Move the fle "directions him into the “about folder. 


Move all the images into the mages” oder. 


e 
0 
Ө Move be йе abet into the beverages" folder 
o 
e 


Finally, load your lounge him fle and try out the inks. 
Compare wih how ours worked below. 


Technical difficulties 


It looks like we've got a few problems 
with the lounge page after moving 
things around. 


چ 


Ard, when you ЫЎ on "eis" Cor "detailed 


a э neh жок е xl. 


Л 


жее слет 


Welcome to the New and Improved 
Head First Lounge 
^ 


one vein и niin li caveri wed maybe yane 
BOWS eg your omn we rer 


Directions 


- 


‘owt ntu ite seer o own Wobei tete 
"eg stet owt our eae dor rae ff 


going further with hypertext 


T think the problem is that the 

browser thinks the files are stil in the 

‘some folder as “lounge html", We need to 

change the links so they point to the files in 
their new folders, 


browser the new location 


of the pag 


So far youve used href values that 
point to pages in the same falder, Sites 
are usually a litle more complicated, 
though, and you need to be able to 
point to pages that are in other folders, 


"To do that, you trace the path бо 
your page to the destination file. That 
might mean going down a folder or two, 
ог up a folder or two, but ether way we 
end up with a fate path that we can. 
put in the hret 
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working with paths 


Planning your paths. 


What do you do when you're planning that vacation kay, you'd 
in the family ruckster? You get out a map and мећу go to 
start at your current locaton, and then trace а path € Sede Maps 
to the destination. The directions themselves are but werk 
‘lative to your loation—if you were in another city with us here! 


they'd be different directions, right? 


"To igure outa relative path for your links, k'a the N. 


same dea: you мап from the page that has the Tink, “There are other kind, of 
and then you race а path through your folders umil fest be el ge to 
you find the file you need to point to. these in later chapters 


work through a couple of relative paths (and 
fix the lounge at the same time). 


Linking down into a subfolder 


O Linking from "lounge html" to elixir hem 
We need to бк the “Чын” ink in the “lounge page Her what the 


jit now we're jut uiing the 


<; Filename ч Mal, which telle 


<a href-"elixir.html'»clixirsc/a» dhe rome bo lok in these 
Felder as "lunge hb! 


O taentify the source and the destination 
When we еза the lunge we ef “lunge hm” in the ug” de, and 
we pt “elimi the “beers” aden, which a sua of Tonge 


— 


8 Bg 


path to here 


plar 2 
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going further with hypertext 


O Trace a path from the source to the destination 


Let's race the path, To get from the "lounge html” file to “elixir html", we need to go 
nto the "beverages" folder first, and then we'll find “elixir hum" in that folder. 


Fst we reed to 
down nt te 
erase! folder 


9 
deal Dat elder 


O Create on href to represent the path we traced 
[Now that we know the path we need зо et into a format the wer 
understands, Here's how you write the path: 

Segarate all parts of 
Fras we go into the the path wilh a 


beverages Felder сч | d 


beverages / elixir.html 


Бы we hve the 
Silane 


Putting it all together. 


سے 
<a href="beverages/elixirhtml">clixirs</a>‏ 


We pot the relie path nko the href ole Now when the Ink ie el 


licked, the 
browser wil lock for the "elnar Мы file im the il 


dee, falder 
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alittle practice with paths 


[em ме, А y 
m {race the relative path from cine fin, to “directions him". When you've 


discovered it, complete the <a> element below. Check your answer in the back of the 
chapter, and then go ahead and change both <a> elements in lounge html” 


وو 


<a href= "pdetailed directions</a> 


YOUR ANSWER 
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going further with hypertext 
Going the other way; linking up into a “parent” folder 


O Linking from "directions html" to og hir. E 
Now we need of those “Back to the Lange ks, Here's what бе ca» why the flame 
Clement юй ike nthe "ccn мй" fe Voce th elle 

а бетен 
the same folder 
<a hrefe"lounge.html"»Back to the Lounge</a> delle, 


ek going to work 


O телүү the source and the destination. 
Lete take a bak at the 


lection html” 
down in 
folder. The 
destination i the 

‘lounge btn” fle that sits 
above the “about” folder, 


where “directions hmi" L E 
рг z 
N Е ы 
Start here 


O Trace a path from the source to the destination 

Lets trace the pth and "geo 

To get from the deer bal folder 

чайове ыш” fle to 

— we need io 

go up onc folder ino the f 

ounge" foldes, and the — ; 

well find lounge irl = 
ше шар ms 

hrs E T 


in that folder, 


Farst, ue veed t . 
y UP te the 
ese Tolder. 
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building tno href 


@ Create an href to represent the path we traced 


We're almost there. Now that you know the path, you need to get it 
into а format the browser understands, Let's work through this 


ate all parts of 
v path with a '/ 


i i 


++ / lounge. html 


Finally, you have the 


/ — 2 
Pronounce s dek det 1 
| 

| Petting it all together 
—— 


<a href=". /lounge.html">5ack 


f 


/ 
New when yos tik on the link the 
browser will lok for 
File in the Folder above 


€ Moon 


Ыр, down, 


housewares, 
lingerie? 
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going further with ^y 


there are no 
Dumb ¢ Questions 


О; Wnatea parent older? HI havea Oe wnat doyoudotyouneedtogo С) wnat abut inte othar direction 
. rutin upwind flue one? ico alo how many folders ean 
Hf the parent of "apples"? oo down? 


Å vou ean truc preter 


А: виз ғана youth band yok wartta go up Each wa ere Wk you can oiy go doun aa nany 
hese called directories) are allen described you're going up by one parent folder. So, it — folders as you have created. If you create 
in larm ol ennie pn For шге, Yu want 1o go up two es you'd ype folders tha are 10 deep, Pen you can wrie 
using your earl, ee peril,” You sill have o separate each part wih араб hat lakes you domn 10 ades Bul 
“appl and apples в cdf", tha so do't forget 1o do that (he browser we do recommend at ten you have 
Myou had aoier odar bend hal was wonthoow ha" means), tal many ler levels, probably means 
a chi hu. oud be a sing ol Your wenste organizator oo compat! 
“apples Just ink of a fary vee. Q once m up two folders how do 
Тер» ЫШ КАСЫ, 

Q okay, parent makes sense, but an he number of мав you can have 
wale"? napa. The spec adises cauton above 


You combine ha." wih the 
етапе So, youre Inking toa fle called 
} When you naed to lal the browser hel “Irit hirm" in a folder that's мо folders up, 

the йе youre Inking ois inthe parent older, youd wel rt htm You might expect 


255 characters, athough modem browsers 
support longer lengths. I you have a large 
sla, however, us something lo bo aware of. 


V% me "grandparent йн, С). . 

fede In othar words 'sbrowseseak but we dort usualy ak about them hat way, CX Му operating system uss "ras 

tor parent. and instead say, he pte ote parent 2 separator shouldn't I be using that 
ter e ee instead of? 

Jn our example, we нала o rk fom 

"decns hini, which sin e “abou folder, (Q) = es there a ini to how far up lem A: No; in web pages you always use 7 

"s open. wich Bin me ange” ga” (etri dad) Dont use Вадаа, 

би. he poet "dni. So we ado апо operalng systems use diferent Бе 

site browser bok UP ona ean. Д. separa (or instanca., Windows uses Г 

|S th way we ele tonsa lo go UP. 2 You can go up nt youre atthe tool sna out when it comes 1o the Web, 


of your website. In our example, the rool was 
"he “lounge folder So, you сой опу go up 
as far as lounge" 


же pick a common separator and all sick io 
i So, whether you're using Mac, Windows, 
Linux, or something else, маје use "Fn 
"he paths in your HTML 


weran 
POWER 


Your turn: trace the relative path from “elixir.html" to “lounge.htm from the "Back to the. 
Lounge" link. How does it differ from the same link in the “directions htm” fle? 


wes eu бровке sı useop y зи 
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relative paths 3n images 


Fixing those broken images. 


You've almost got the lounge back in working order; all you 
need io do now is fix those images that aren't displaying. 


Hey, its rice you fixed all 
those links, but didn't you forget 
something? АП our images are broken! 
Dorit leave us honcing-weve got а 

We haven't looked at the <Lma> element in detail yet (we will business to run. 

in a couple of ch Ш you need to know for now is 
that the «ing» element's see attribute takes a relative path, o 
just like the hres attribute ° 


Here's the image clement from the “lounge” file 


<img sre="drinks.gif"> 
— 

Here's the relative path, which tells the 

browser where the image ie 

specify this 

attribute in the <a> element 


Finding the path from lounge html to drinks. gif 


To find the path, we need to go from the “lounge imal” fle to 


Where the images are located, in the “images” rattle 


GORL vere in the ln 1) Go down into 


peris _ "T" 
ler and ме veed a 

fle e e ages alder [=] B A 

2) There's өм, 7 . 


fe mst" , 
Tib te here 


So when we put (1) and (2) together, our path looks Ше *images/drinks gil, or 


<img src="images/drinks .gif"> 
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going further with hypertext 


Finding the path from “elixir.html” to “red.jpg” 


images of several drinks "red pg" 


е rest will have а similar path because they 
arc all in the same older: 


GOL we're in the 
overages folder ard we 
reed to qek over do the 
images folder. 


(2) Ard then down into 


the "age folder 


and rd a 


are x: 
وو‎ 


ше ae Kemener 
hs will be written ж" im | 
Mp (2) Finally, ve Find ved 


So putting (1) , (2), and (3) together, we get: 


Die aa frd the 
изн тиме BOW beben Им 
parent folder folder 2 

I үи 
ГА images 7 red. jpg 


pup ы ee 
у 


WT Me E 
. ./images/red.jpg"» 


youarehere e 
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fixing images with relative links 


That covers all the links we broke when we reorganized the lounge, although you stil need to 
fix the images in your ‘lounge. him" and eat fles. Here's exactly what you need to do: 


Exercise 


© In lounge him’ update he image sxc attribute FE 
to have һе val mages. — 

© eben update the image szc attibute so 
tha. mages” comes bere each mage name. 

Q Save both fles and ай "unge him in your 
browser You now be able to navigate between 
al the pages and view the mages. 


ر 
PS: yore having any oe, der‏ 


*chapter2/completeiounge" contains a working version of 
the lounge. Double-check your work against. 


You did it! Now 
we've got organization and 
all our inks are working, Time 
do celebrate. Join us ond have a 
green tea cooler, 


And then we 
con take the site to 
the next level 
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S ULLET POINTS 


When you want to ink rom one page. 
to another, use the <a> element. 

^ The href attribute of the <a> element 
specifies the destination of the link. 


= The content ofthe <a> elementis he 
label for the ink. The label is what 
you see on the web page. By default, 
its underined to indicate you can 
dickonit 


. You can use words or an image as 
the label for a ink. 


= When you cick on a ink, the browser 
loads the web page that’s specified 
in the re attribute. 


. You can fink to files in the same 
folder, or fles in other folders. 


= Arelative path is a link that points to 
other fles on your website relative 
to he web page you're inking from. 
ust ike on a map, ће destination is 
relative to the starting point. 


going further with hy 


Use." tolink to a fle thats one 
folder above the fle you're linking 
from, 


7 means "parent folder’ 


‘Remember w separate the parts of 
your path with be (forward stash) 
character. 


When your path to an image is 
incorrect, youll see a broken image 
con your web page. 


Don't use spaces in the names you 
choose for fes and folders for your 
website. 


"s a good idea to organize your 
website fies early on in the process 
of buiding your site, so you dont 
have to change a bunch of paths 
later when ће website grows. 


‘There are many ways to organize а 
website; how you do й в up o you. 
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practicing pst 


d The Relativity Grand challenge 


Heres your chance to put your relativity skills to the test. We've got a website for 
the top 100 albums in a folder named "music. In this folder you'll find HTML files, 
other folders, and images. Your challenge is to find the relative paths we need so 
we can link from our web pages to other web pages and files. 

‘On this page, you'l see the website structure; on the next page, youll find the 
tasks to test your skills. For each source fle and destination fle, its your job 

to make the correct relative path. If you succeed, you wil truly be champion of 
relative paths. 


Good luck! 


o fart od 


3 lca 
29] Быј 


N Feel free te draw right 
bebe ре 
the pa: 
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going further with hy 


It's time for the competition to begin. 


Ready...set...writel 
EYaMPLE. 
чя 
ROUND ONE 
E m 
top OT bd 
Row» Two 
E-——- E 
d a 
Row» Tires 
E E. 
B B 
Bonus Row» 
E 
«etal LE 
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зоте fun for your loft br 


HTMLeross 


How does a crossword help you learn HTML? Well, al the words ate HTML- 
related and from this chapter. In addition, the dues 
turns that will help you burn alternative routes to HTML right into your brain! 


vide the mental twist and 


Across Down 

1 myflestndex htm is this kind of link. 2 href and src are two of these. 

З. Another name for a folder. 4. Hardest-working attribute on the Web. 
6. Flavor of bue drink 5. Rhymes with href. 

9. What href stands for. 7. Top folder of your site. 

13. Everything between the «a» and </a> is this. В. The HT in HTML. 

46, Can go in an <a> element, just ike text 10. Healthy drink. 


17. Pronounced.” 


1. A folder at he same level. 
12. Use .. to reach this kind of directory. 
14. Text between the <a> tags acis аза 
15. A subfolder is also called this. 


going further with hyperte 


You needed о add a link with the label "Back to the Lounge" at he bottom of the elixir page that 
points back to lounge htm". Here's cur solution. 


se ann: — 
{он — 


<html> 
<head> 
‘<titletiead First Lounge Elixirs</title 
</head> 
body» 
p 


Raspberry ee Concentration 


<h2>Green Tea Cooler</h2> 


* 
<img агоя^геев. jpg"> 
Chock full of vitamins and mi Blueberry Bli Elixir 
combines the healthful benefi 
a twist of chamomile blossoms 
</p> 
hisRaspherry Ice Concentrationc/h2» — xe 
+» 


<img srce"lightblue.jpg"» | Cranberry Antioxidant Blast 
Combining raspberry juice wit) о 

citrus peel and zosehips, thi. 

will make your mind feel cles. I 


<img arce blue. jpg» — 
Blueberries and cherry essence mixed into а hae 
of elderflower herb tea will put you in a A 


miikire n2» 


State of bliss in no tine 


</p> 
<h2>Cranberry Antioxidant Blast</h2> | 
+» 

<img агоя"гей.}р'> 

Wake up to the flavors of cranberry and hibiscus 


in this vitamin C rich elixir 


T рае 
. 
<p> 
ч» KL We ok the bink imide ie oum paragraph 
pes фе Keep be bay Well mre 


abort this in the nent chapter 
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Exereise solutions 


Label Destination lement 
Hot or Not? ath <a href="hot.html">Hot or Not?</a> 
Resume E Монеа 
Eye Cody candy.nemt | <a res-, filed, oye candy</a> 
See my mini |mini-cooper.ntmd | ә bref=nini-cooperhtn"sSee my ninic/3> 
лака play | эйе <a hrefe'illionaire.html"s зш </a> 
RELATIVE 
DrRectoRy 
D 

"AsPRERRY , ^ 

Е vo ^ Y 

F Tio c D 

HY PERTEXTREFERENCE 

3 > нт т 

Пп папа A Е 

D "nnnm BB x 

[i nnn a T 

SAGE LN 

е 
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going further with hyper 


- pen your pencil 
Solution Trace the relative path trom "unge tni to ‘directions mi When you've 


discovered it, complete the <a> element below. 


Here's the solution. Did you change both <a> elements in ‘lounge htm? 
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Ag The Relativity Grand Challenge Solution 


bee 
ROUND One E ae Felden 29 
= TAE te loso, we Nad 
а — - Loge damm nto be 
اد ل‎ ang folder. 
Row» Two V genres nl i down m 
e gees directory, 10 
= beget . we 
Б Fist had dise t 4 
a тыш, and then down into 
2 The mages falder. 
KCN mI 
e 
Rowo» THREE V 2 Ka vel. 
[А келелн floyd htm! E пекан 
EM — — H 
аы Ld 


. This was a tricky one, From 
Bows Row» K ey e, a om 
bee ed Rider we had to te 
up TWO Folders te get о төш, 
aos aen le on 
Sed inl ait, be Find the 
ada ed 
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3 building blocks 


Е ж 
Web Page Construction 


hard hats, Betty, I's a real 
construction zone around here, and 
these web pages are going up fast! 


We better find some 


1 was told I'd actually be creating web pages in this book? 
You've certainly learned a lot already: tags, elements, inks, paths...but its ай for 
nothing if you don't create some kiler web pages with that knowledge. In this chapter 


жете going to ramp up construction: youre going to take a web page from conception 
to blueprint, pour ho foundation, bud t, and even put on some finishing touches. AI 
you need is your hard hat and your toolbeit, as well be adding some new tools and 
giving you some insider knowledge that would make Tim "Tho Toolman" Taylor proud. 


www it-ebooksinto 


* 


т 


meet tony and his segway 


Tei 


What better way to enjoy my new. 
‘Segway than te hit the open road? Im. 
riding it across the entire USA and Tve been 


documenting my travels in my journal, What Т 


really need to dois get this in a web page so 
my friends and family can see it. 


deen oo aee 
EMT Te куда 
e“ «л un. eee. 
pre) Б 

mU mo 


] anoo cie o 
h tie te eet Ber D 

een rg ad бен ил Wh NC KE 

ККА ЛЕТА Озше 
Boe a e SU ot бөлү км 

Mono ын, . —— 

Turis e ae Ты get 

Кре 

4.5 » 

en 


y 


Make sore you read trough Tens dle bre e 
tome n handy apost the chapter 


в ci 
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building block 


vetonmended 
Sof Ar peg 


From journal to website, at 12 mph ° 7. 


Tony's got his hands full driving across the United States on his Segway 
Why don't you give him a hand and create а web page for him? 


Here's what you're going todo: 


First, you're going to create a rough sketch of the journal that is the basis far 
your page design. 


Ө Nest, you'll use the basie building blocks of HTML (<i>, ch», <h3>, <p>, and so on) 
to translate your sketch into an outline (or blueprint) for the HTML page 


Ө Once you have he outing hen you're going to translate tino real HTML, 


Ө к with the basic page done, you'll adel some 
some new HTML elements along the way 


E b ud your pencil STOP! Do this exercise before turning the page. 


таке а close look at Tony's journal 


‘and think about how you'd present the Your sketch 
same information in а web page. goes here 

Draw a picture of that page on the right. 

No need to get too fancy; you're just — 


creating а rough sketch. Assume ай his 

journal entres willbe on one page. 

Things to tink about: 

= Think of the page in terms of large 
structural elements: headings, 
paragraphs, images, and so on. 

= Are there ways his Joumal might be 


changed to be mare appropriate for 
the Web? 


making a rough sketch 


The rough design sketch 


"Tony' journal looks a lot like a web page; all we need to do to 
create the design sketch is to get all his entries on one page and 
тар out the general organization. h looks like, for cach day 
that Tony creates an entry, he has a date heading, an optional 
picture, and a description of what happened that day Let's 
Took at the sketch, 


rt gave hit journal a title, 
Sea USA so let's get that 
Wight at the top as a heading 


He also gave his journal a 
deszription Well capture 


at here as à small 
Faragagh at the p. 

Each day, Tony тезе an entry that 

elder the date, usally a рери, and 

2 description of the day's adventurer 


e Vende m age ond 
эйе енкей, ™ 


Wal | made 12.00 mes already, and | posed 
rough some intersting places ө, the va 
Wala ala, WA, Maye City, ID, Botha 


entry, he just has a heading (the dake) and a, 


tription of the day's evente pee My Hr, 2012 
Iam көе Bara Shane ўе нүн on бе ide 


M etie e 
The hd оу sd led jak <b Cay og ten 


A eem m ttm kun Roo 
June 2, 2012. 
Unlike Toy pager улт, our pase length int ah 


wy b 
ка e cita i 
Tuy На Friends and Family can jest vse the 

TAS har cl rc hs mires ) 


My ek day of the bip | ear't belese 


jer of rally уй everything pated and табу ge 

owever, notite that we reversed the orde Betaee l'm on a Segway, | waw able | 
= nal entries From newest to oldest. That bak Нер: norte? 
eee ed err appear at the top жаны) pets: le. ЫАМ en, 
pred them withart stealing Kx Te edu ud ory Чэ 


sere vri tte Балам miler begs with me Сор 
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building blocks 


From a sketch to an outline 


Now that you've gota sketch of the page, you can take 
each section and draw something that looks more like 
an outline or blueprint for the HTML page. 


Here we've taken eath area of the 


All you need to do now is figure out which HTML 
element maps to each content area, and then you can 
чап writing the HTML. 


EXERCISE: WEB CONSTRUCTION 
You've already figured out ће major 
architectural areas of the page: now you just 

o пай down the building materials- Use 
elements below to label each area. You 
wont use them al, so den worry if you have. 
some building malaria left aver. And dont 
аы to wear your hard hal. 


7 


© 
d g 
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turning the outline into 2 web page 


From the outline to a web page 


You're almost there. You ve created an outline of 
Tony's web page. Now all you need to do is create 
the corresponding HTML to represent the page 
and fill in Tony's text 


Before you begin, remember that every web page 
needis to start with the <html> clement and include 
the <head> and <body> elements 


Now that you know 
what "building blocks" make 
up each part of the page, you 
can translate this blueprint 
directly into HTML. 
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building blocks 

кеа De A, 

n't Forges ү aha > 

ЫТЫ der бее 
) We're using the ttle of the journal as 

p "le of the web Page‏ س 
purs‏ 
titles Trip Around the USA on a Sequayé/title>‏ 


— ш> 


bas ers the heading ard 


<hl>segway'n USA€/hl» демде s een 


p‏ و 
ЧЕ -—‏ — 


Documenting my trip around the US on my very own segway! 


p tL ae 

<img srcs"images/aegway2.jpgs» 4 det х. 

<> eres Tes most 
Well 1 made it 1200 miles already and I passed retort etry 


through some interesting places on the way: Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Laat Chance, CO, 
Why, AZ and Truth or Consequences, НМ, 

</> 


en 14, 2012/2 


P Here's his setond 
I saw some Burna Shave style signs on the side of the entry which docu 


road today: "Passing cars, When you can't see, May get 


you, А glimpse, Of eternity." I definitely won't be passing remis 
any cara 

ч» 

— аваль, [reped 

ere“ 5/56 E төн 
р ie Tot sete 

Wy first day of the trip! 3 can't believe i finally gor ӘЙТӘ 
everything packed and ready to go. Because I'm on а Segway, 


I wasn't able to bring a whole lot with me: cell phone, iPod, 


digital camera, and a protein bar. dust the essentials, As 
пао Tru would have said, "A journey of a thousand miles begins 
with one Segway." 
</> 


Last, but not least, don't forget to 
«љоду» 3 
Mimi L doe Your <body and dnb elements 


e ahead and ype tht к. Coe yor file to the а ута folder as “уне el” Yl nd he images 
ety ad pojl y dead m he “еден de When yore dt уне be page ә test drive 
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test driving болу pag) 


Test driving Tony’s web page 


ANA yino erer ush on steer 


Segway'n USA 
— ai i DSen aay vay aaa Marit 


August 20,2012 


Well ben 1200 miles sed and 1 passed hough some 
interesting places on the way: Walla Walla, WA, Маре Ciy, ID, 
Bountiful, UT, Last Chance, CO, Why, AZ and Truth or 
Consequences, КМ 


July 14,2012 


saw some Barma Shave siyle signs on the side of е rosd 
today Passing cars, When you шї see, May get you, A glimpse, 
OF eternity. 1 defintely wont be passing any cn, 


June 2, 2012 


My fist day of the tp! Lea believe бау got everything 
packed and ready to до. Because Fm on a Segway, I wast abe 
T 
apes bar, Just the essentials. As Lao Tea wouid have si, 
ТА оше of a thousand miles begins with one Segway.” 


т 
is нн 
45 ә readable ad 


ebe 


Lee en 


Fantastic! This looks 
great; 1 cant wait to add 
more entries to my page 


Te callin i 
Tr the wd 


building blocks 


Adding some new elements 


You have the basic elements of HTML down. You've gone from a hand- 
Written journal to an online version in just а few steps using the basic 
HTML elements <p>, «hi», <h2>, and «inq: 


Now we're going to st 


% your brain a little and add a few more 
common elements. Let’ take another look at Tony’ journal and see 
Where we can spruce things up a bit. 


Segway'n USA 


eee 


— анна 
[эт e IL... 
| 
' 


to bring a whole lot ийй we cellphone, iPod, digital camera, | [2227 77 
and а protein bar, Just the essentials. As Lao Tzu would have 
said, "A journey of a thousand miles begins wit one Segway" “lj 


heck this ө Tony has a Vittle mole 

‘hock atthe end of his irk pst es 

tic темей wersion of à Lào Tox poke 

A er of à Bed miles begins 
bone Segway 


HTML has an демен, ар, for jest that kind of 
hing Lets ake a lock on the rent page 
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quotes in your him! 


Meet the cq element 


Got a short quote in your HTML? The <a> elementis just what 
you need, Here's а litle test HTML to show you how it works 


aus 
E 
E. y 
2 V 


n j, TT 


po 
We surround cath spoke with а «ар ofering tag and 


e dca tn obie that we der't ok er om 
AL edle taraen xend D ve 


And test drive rge 
dnd here's how the fete lak in the re x 


browser. Notite the browser has gone to 
the rouble of adding the de eck | FREY now wie pol nead a good qut, oy бош "To be or morto heor 


— р alamant 
ch it! sista, tecum 
Nap hit! you add your own double quotes, 
dae eee, 
yo sale ae Йа кмш шипа a 
ant browsers t soothe озше Ihat you go 
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"Wait a sec. you removed. 
the double quotes and 
“substituted а «Ф element, which just 
displays double quotes? Am I supposed 
о be impressed? Are you trying to 
make things more complicated? 


No. We're trying to make things 
more structured and meaningful. 


Tha 
in tex, but when we use <q>, that means something 


are lots of reasons people use double quotes 


specific—it means the text of an aal quote п Tony's 
case, а “remixed” quote) 


Tn other words, what we've done is to add more 
meaning by marking up the quote. Before we added 
the <a> element, the browser just knew it had a 
paragraph of text with a few double-quote characters 


în it. Now, because we're using the <р element, the. 


browser ишу that seme of that text is a real quote 


So what? We 
quote, it can display it in the best way possible. Some 


iov that the browser ks this is à 


browsers will display double quotes around the text 
and some won't; and in instances where browsers are 
using non-English languages, other methods might be 
used. And don't forget mobile devices, ike ell phones, 
or audio HTML browsers and sereen readers for the 


visually impaired. I's also useful in other situations, 
such as a search engine that scours the Web looking for 
web pages with quotes. Structure and meaning in your 
pages are Good Things 


Опе of the best reasons (as you'll sce when we get back 
to presentation and CSS later in the book) is that you'll 
be able to style quotes to look just the way you want 
Suppose you want quoted text to be displayed in italics 
and colored gray? If you've used the <q> element to 
structure the quoted content in your web pages, youl 
һе able to do just that. 


building & 


Sed Using dovble 
spokes doesn't 
make something an 


k 
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adding 2 quote 


Heres Tony's joumal. Go ahead and rework his Lao Tau quote to use the <a> 
d element Mer you dane ton paper, make е changes in your ual int fle 
ExeRCie e give ita test drive. Youll inthe solution in fne back of he chapter 


p 


<title>segvay'n USA</title> 
</head> 
<body> 


«эз>ведизу'п павы» 
E 

Documenting my trip around the us 
</p> 


my very own segway! 


<h2»august 20, 2012</h2> 
<img src="inages/seguay2.jpg"> 
E 
Well I made it 1200 miles already, a 
through some interesting places оп ti 
WA, Magic City, 10, Bountiful, UT, L 
Why, AZ and Truth or Consequences, WM. 
</p> 


1 passed 
чау: Walla walla, 


аллу 14, 2012</h2> 
ES 


you, A glimpse, 
</p> 


ernten 2, 2012</h2> 
<img src="inages/seguay1.jpg'> 


E 
My first day of the trip! 1 can't believe I finally got 
everything packed and ready to go. Because I'm on a Segway, 
1 wasn’t able to bring a whole lot with me: cell phone, 


digital camera, and a protein bar 
Таз Tzu would h 


^ journey of a thousand miles begins 


<> 
</body> 
</html> 
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The Case of the Elements Separated at Birth 


Identical twins were born in Webvillea number of years ago, and by 

а freak accident involving an Internet router malfunction, the twins 

Were separated shortly afier birth, Both grew up without knowledge 

of the other, and only through another set of freak circumstances did 
j, Which they decided to 


they later meet and discover the 
keep secret. 

‘After the discovery they quickly learned that they shared a 
surprising numberof things in common, Both were married 
to wives named Citation. They also both had a love for 

quotations. The first twin, the <q> element, loved short, pithy 

‘quotes, while the second, «blockquote». loved longer quotes, 

ofen memorizing complete passages from books or poems. 


Five-Minute 
Mystery 


Being identical twins, they bore а strong resemblance to each othe, 
and so they decided to put together an evil scheme whereby they 
might stand in for each other now and then, They first tested this on 
their wives (the details of which we won't go into), and they passed 
with Dying colors—their wives had no idea (or at least pretended not 
19). 


Next they wanted to test their switching scheme in the workplace 
Where, as another coincidence, they both performed the same job: 
marking up quotes in HTML documents. So, on the chosen day, the 
brothers went to the other's workplace fully confident they'd pull off 
their evil plan (afier all, if their wives could tell, bow could their 
bosses?) and that's when things tumed bud. Within 10 minutes of 
starting the work day, the brothers had both been found to be imposters 
and the standards authorities were immediately alerted. 


How were the sins caught in the act? 
Keep reading for more clue 
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creating longer quotes 


Looooong quotes 


Segway n USA 
Now that you know how to do short quotes lets — rote 
tackle long ones. Tony's given us a long quote pu emo 

with the Burma Shave jingle. у ен 

1n his journal, Tony just put the Burma Shave July 14,2012 

quote right inside his paragraph, but wouldn't it 

be better i we pulled this quote out into a "block" 1за som: Bu Stave style nso б йе of be road 

of its own, like this: mny: "Possing сап, When you сий! see. Mey petyon, A 


йук, OF eem. бебин won tte passing any са. 


| sa some Burma Shave style signs on the side 
of the road today к= 


Frain tre do now wit 


When vt see, k : 
A sepe чна abart 
deny ете. 
| definitely won be passing any tars 


"That's where the <blockquote> element comes. 
їп. Unlike the <a> element, which is meant for 
short quotes that are part of an existing paragraph, 
the <blockquote> element is meant for longer 
quotes that need to be displayed on their own. 


Тез important to use 
the right tool for the job, and 
the sblockquote» element is 
perfect for this job. 
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building blocks 


Adding a <blockquote> 


Let's а <blockquote> into Tony's online journal, 


Open your "journal html" le and locate the July Mth 
entry Rework the paragraph to look like this 


To ме the ste, 
„ anna Clement, we need ta erd this 
T paragraph fra 
1 sau sone Burma Shave style signs on the 


ite of the rond cory: 
E ч Nest ve put the Burma Shave text in the 


<blockquote> с diee dert 


Passing cars, 
ep N We же put eath line of text on a 


seals eso vet more Th 
ES н es 
arn g |a ee dae 
E, mi 
ieee nd бый we need bo add 3 «p> 
> tag to sar the paragraph aor 
T aerinitely won't be passing any cars. the Calpe 
EH 


Time for another test drive. Open "journaLhtml" in your browser 
and take a look at the results of your work: 


cblockte> creates à 
separate block (lke <p> 1 
does), фы it indents the — — 
tert a bit to make it | 

look more like à мейе | July 14,2012 
Just what. ve wanted. 


| sw some Burma Shave style signs on Ве side nf the rad doy: 


Т a Passing cars, When you can't see, May get vau, A glimpse, ОГ 

Buk өк yt a lair 8 
уын она . sanity eto yc 

3 e inet à | 

veal vant | 

геа een NA June 2,2012 

Wee Lets tome bath 

atin a bit 
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questions about quotes and blockquotes 


O solet me see nav ti ght 1 
use <p when just want to ave some. 
ute in wth the rest ot my paragraph, 
and use <blockquote> when I havea 
бине that vano brea outon ts own 
in my web pags? 


А: toive gatt yt us 
‘gues Vy аде чапар 
. 
ме pape you evo ne 
— yr gt 


muti paragraphs in a tock 
quote? How do ido that? 


Д: asy- Jost put paragraph nens 
nsa your йодаш ow eaeh 
юрди Ds wy a a hane 


О: How do iknow what my quotes 

or Bick quotes wil lock ike in other 
Browsers? N sounds Ike they may handle 
eatery. 


А: челине he Wor We, 
Yok i eal intr оне нй 
ike yg tir 
ove Sona иеше бие фи, 
face bs es oo 
i Tre oniy a o wa Sarah 
bloat e sya hen pura adu 
ri ed bar 
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Dumb Questions 


Q: gst mat e оао element 
treats text out ito it lock of 

н oun and indents га why isnt ihe 
ceke inside he paragraph jat 
te the e element 


Az вине te acu resty ia 
элк paragraph Thak aboa tha yu 
"rer pig toa or processo en 
Jounin en rra othe Ren 
Foy on nda an paga To ype 
aliod gy ote ame орала 
inet ne ql Pu ine acl 
id ra moment Kean gern put 
ad wera gong cane tac a e. 


Ato, remember hat he indenting в 
ust ihe way some browsers spay а 
"bcckquoe» Some browsers might ol use 
Indentation lor <blockquote>. So, dont rely 
опа «оско» to look he same паї 
[o 


Q can combine quote elements? 
FoF instance, could use the р lamant 
inside the tockqute element? 


А: sre маноз атрааь 
Vti «р sone jo 
pic no цо. туна 
а Гуши sig mra ма ша 
werner auta ene ба 
enten sensa аша 
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О; үш said that we can нун hese 
elements with CSS, во i want to make 
the textin my <a> element als and 
riy can do that with CS. Ви couldn't 
Tjust use he sam» elemento айо my 
quotes? 


А: Wel you cua bà teinte 

the ght way doi, енде orba 
шаһ ca uror ito t 
Siga re Pan менне o ly 
vir pnd d b prom t 
e rg realy ds emphases a vr, or 
Jou wani o ada onghasis to maka a stong 
Font atout uc, беп олун мад 
— — 
Buon spy or e шка. Tee 
are oasia and betray 10 get De ek 
orator your dore wih CSS 
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Solved: The Case of the Elements Separated at Birth 
How were the identical quote twins found to be imposters so quickly? 


As you've no doubt guested by now; <q> and <blockquote> were 
discovered as soon as they went to work and began to 


markup text. «qr normally апалай ile ques Five-Minute 
were popping out imo blocks of their own, while Mystery 


.. anne 
7 É 
.. abs toti war. Ale 
К dard rdc ес de C 
tne eed upto whe mea tn gne va 
Lade Ba йит ool тект ryt cud чей, 
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block 2n inline elements 


The real truth behind the <q> and <blockquote> mystery 


(Okay, йз time to stop the charade: «осше 
The «blockquote» clement is a bock eleme 


> and <q> are actualy dilerent types of elements 
and the <q> element is ап inne clement. What's the 


difference? Block elements are always displayed as if they have а inebreak before and afier them, 
While inline elements appear in line” within the flow of the ext in your page. 


Block: stands on its own 


Inline: goes with the flow 


4%, dis, eo, «p>, and <bletkauote> are all block elements 


api <a>, and <en> are inline elements 


Wale 
Аиа | 
naamin |__| 
‘the flow of t 
p" 


Remember: block elements stand on their own: 
inline elements go with the flow. 
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thereytre no 
Dumb Questions í 


think know what a linabreak is; Its ike hitting the carriage return 
ons typewriter or the Return key on a computer keyboard. Right? 


Д: reny ruc Ак is tay a "treatin to o 

th an tapers en you I De Ratum ey or on soma computers, fa ner 
le To ity кон atten HTML е dor show wp aly wen 
tu bv aya page, Bo ула oen al ay you 
— тшше nal sop eto? 


‘Once again, this all sounds great, 

but why is ай this talk of linebrecks, 

blocks, and inline elements useful? Can 
we get back to web pages? 


Don't underestimate the power of knowing how HTML 
works You're soon going to see that the way you combine 


has a lot to do with whether elements 


elements in a pag 
are displayed as block ог inline. We'll get to all that, 


In the meantime, you can also think about block versus 
inline this way: block elements are often used as the major 
building blacks of your web page, while inline elements 
usually mark up small pieces of content. When you're 
designing а page, you typically start with the bigger 
chunks (the block elements) and chen add in the inline 


elements as you refine the page 


The real payoll is going to come when we get 10 
controling the presentation of HTML with CSS. If you 
know the difference between inline and block, you're 
going to be sipping martinis while everyone else is stil 
trying to get their layout right. 
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carriage returns ал 1h 


Tve been thinking 
about the Burma Shave lines. I wasn't 
surprised that they weren't broken up 
because we've said from the beginning 
that whitespace and linebreaks aren't 
displayed by the browser. 


but the only way I con think of 
чо fix this is to put each one in 
а block element like a paragraph, 
Otherwise, how can you get the 
browser to add linebreaks? 


What if you had an element whose 
only job was to give you a linebreak 
when you needed one? 


Wouldn't that be nice? You'd actually be able to make 
the browser pay attention and insert some carriage 
returns for a change. 


Tarns out there is an element, the <be> clement, just 
for that purpose. Here's how you use it 


«лду 14, 20 


2> 


yt ke break the 
hen you want . 
Flow and insert a “nebreak 


Heres the Му 
ТА snippet From 


Tons pae 3 


When you can't ses, SE 


A glimpse, 
«blockquote» 
+» 


t be passing any cars 


building ы 


Go ahead and add the «br» elements to Tony's joumal, After you 
make the changes, save the fle, and give it a test drive. 


Segway'n USA 
——— 
August 20,2012. 


Heres what the changes should 
leak like. Now ratte 
Burma Shave slogan shld vead! 


N 


x EN usns 
‘Chance, СО, Wiy AZ ind Truth or Consequences, NM. 


July 14, 2012 


1 saw some Burma Shave style signs on the side of the oad today: 


Passing cars, 


ы кык. 
pd 
"rm eee 


pro OF etemity 


1 definitely won't be passing any сав. 


June 2, 2012 


ck and rendy go, Boca 1 


y vanae 


wen wink ot in cele, Pod, pal caer ud 
ape би. Jos бе essentials, As Lao Тар wed have si 
Зву Bound айа egi wi oe Sepia 
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void elements 


Tn Chapter 1 we said that an element 

is an opening tag + content + closing 

tag. So how is «br» an element? It doesn't 
have any content, and it doesn't even 
have а closing tog. 


Exactly. It doesn’t have any content. 


The cbr» element isan element that doesn't have any content, Why? 
Because it's just meant to be alinebreak, nothing else. So, when an 
clement doesn't have any real content by design, we just use a shorthand 
to represent the element and й ends up looking like «b». After all, if we 
didn't have this shorthand, you'd be writing <b></b> every time you. 
needed a linebreak, and how much sense does that make? 


They ме 
do be called 
m 


<b> isnt the only element like this; there аге others, and we have a name у whieh 
forthe: mid dona In ah, we ve shred seen another wid mem, M appen 
the cina» clement. We'll be coming back io look at the «ima» elementin made too 


detail in а couple chapters, Ie 
them to void 
analy, we 
sl Tie empty. 


Keep in mind, the reason for the shorthand isn't laziness so much as it is 
eliciency I's more eficient to represent void elements this way (efficient 


in typing, in the number of characters that end up in a page, and so on). 
In fact, afier r 


ding HTML for a while, you'll find thar it is easier on 


с» whale point of 


this element & do insert a lncbreak 
Heres the opening n There's reilly no content 


l Y ГА 
<br> ju EES 


| 


br» «уз с 


Here's the оша tag 


— Фау, typing 4 
ro there 


in is REALLY sili 


never going to be 
content between there tage 


Tm half the 
element I used to 
be. (sniff sniff). 


dereen , 
Dumb Questiens 


О: so the only purpose of os isto insert a 
йаш? 


А: gn oy pac he eon yay sas 

ls i yow certs when you sarta ен о 
nit qp. d m you vat net a 

— — 


О Why «о called an “oi lament? 


— clan as n 

ani png» crs gg, ol 
ecu ncn oo dn Th ha 
Te videl ga rd roin tre anl 


Э: пън dort get it. Explain why the 
<b elementis "void? 


Think about an element Ike <h1> (or <p> or <>) 
Tha whale point of the elementis 1 mark up some content, 
he: 


йэ: wait, order ve, 


With ha <br> element Ie pontis just o insen a паты 
into your HTML. There в по contant you ar гула o mark 
up. We dort aed al the extra brackets and markup, so 
we ust shorten tinto а more convenient form. If youre 
thinking vide king of a weird name, you're right f 
cames from compute scence and means "no value” 


О: hre thero any other void elements? tik 
mi must be a void element, too, ight? 


Yes, hoo are a coul ot them, You've already 
‘etn us use he <img> element, and we'l be geting o he 
detali ol his element soon: 


F 
“КЕКТЕДИ 
шн amps Ns inen? 


No, Thara are two уре ol lant in tha woe: 
ronal elements. Ike <p>, <h1>, and <a>, and void 
етеп, Ike <br> and <img>. You dont such back 
and forts between the o For instance, If you just Iyped 
a һы тураем, hats an opening tag without 
‘cantant or a dosing tag (rot goo). f you rte 

<a el" mpage hini ces thas an empty өтеп! and 
is pefocty Ine, but st very ust In your page 


О: e seen pages not with Фо, but wilh tc 
What does tat mean? 


Д: коонду ha samo ming: Te sae uses 
һу ва more SCL yan Dat as йл VITAL 
heee ou e cr atr to ard unless 
youre paring on wring pages complant wih TL 
te happend rr amato on v 
ae do mr HTN 


Elements that don't have 
any content by design 

are called void elements. 
When you need to use a 
void element, like <hr> 

or <img>, you only use 

an opening tag. This is 

a convenient shorthand 
that reduces the amount of 
markup in your HTML. 
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we need a list for tony's site 


Meanwhile, back at Tony’s site... 


You've come a long way already in this chapter: you've 
designed and created Tony's site, you've met a few new 
elements and you've learned a few things about elements 
‘that most people creating pages on the Web don't even 
now (like block and inline elements, which are really 
going to come in handy in later chapters, 


But you're not done yet. We can take Tony's site from 
aod to great by looking for a few more opportunities to 
add some markup. 


Like what? How about lists? Check this ош: 


There's a list vit here Tony 
wrote the lit of tities that alli made i 1200 miles aed, and I passed dough some 
hes ben бей nhs aa | meeting placos оп е way w, 
journal entry 


Wouldn't ice great if we could mark up this text so the 
browser knows this text i a list? Then the browser could 
display the list ems in а more useful way. Something like this 


denm 


{ped rosy eee ө 2 
the way: p 

1. Walla Walla, WA m 

2 Moye Ciy ID tete at rek onh i 

S beet: eb be as 

^ Las Dane, 00 For WH 

5 Why, AZ order 


а Truth or chene, NM 
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Remember, it's 
Important to use the 
right tool for the job, and 

же «p> element is NOT the 
right tool for this job. 


building block 


Of course, you could use the <p> 
element to make a list... 


I wouldn't he hard to make a list using the <p> element, 
I would end up looking something like this 


But there are lots of reasons not to. 
‘You should be sensing a common theme by now You 
lays want to choose the HTML ele 

in meaning to the structure of your content. M this sa 
list, let's use a list element. Doing so gives the browser and 
you (as you'll see later in the book) the most power and 
exbilty to display the content in а useful manner. 


i that is closest 


Why not use <p> to make lists? 
(Choose all that apply.) 


[O A HTML has an element for lists. 
Ifyou use that, then the browser 
knows the text is a list, and сап 
display it in the best way possible. 


07 в. The paragraph element is really 
meant for paragraphs of text, not 
lits. 


D) C. it probably wouldnt look 
much like a list, just a bunch of 
numbered paragraphs. 


07 О. if you wanted to change the 
order of the list, or insert a new 
йет, you'd have to renumber 
them all, That would suck. 


aa gy anny 
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constructing a list 


Constructing HTML lists in two easy steps 


Creating an HTML list requires two elements that, when used together, 
form the list, The first clement is used to mark up cach lis en. The 
second determines what kind of list you're creating: ordered or wordend 


Let step through creating Tony's list of cities in HTML. 


Step on 
Put each list item in an «li> element. 
"To create a list, you put each ы tem in its own «11» element, 
Which means enclosing the content in an opening <1 1> tag and 
а losing </11> tag As with any other HTML element, the 
content between the tags сап he as short or as long аз you like 
and broken over multiple lines 


Fragment of the Letate this HTML i „ 
кс jk hong a Sanat - Te 
кик enden каты ч d roe e 


<ha>august 20, 2012</h2> 
<img src="inages/seguay2. jpg"> 

<> 

Well I've made it 1200 miles already, and T passed 

through some interesting places on the way: 


3 First, move the Ы theme outside of the paragraph. The 

p e gog bı ind er t 

and then close cath lek Hen 
ашаа Walla, e> Ж э do «I at of Loe 
Abels City, ching » 
а Е Ibu ef bee d> 
сазла chance, сос» S cements vil ime 
ab, ache E ee bel 
“эте or Consequences, elite 


ашу 14, 2026/82» 
< 
тоза today 


ve style signs on the side of 


</> 
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building blocks 


Enclose your list items with either the «ob or «ub element. 
J£ you use an «o1» element to enclose your list items, then 

the items will be displayed as an ordered list; if you use <ul>, 

the list will he displayed as an unordered lis. Here's how you. 
enclose your items in an «1» element. 


agin чете just showing a Fragment of the 
HTML Fron Tony's journal here 


<h2>august 20, 2012</h2> 
ing sro="images/segway2. jpg» 

+» 

Well i've made it 1200 miles already, and I passed 

thrcugh some interesting places on the way: 


visited the 
k а o be an ordered dd. becavse Tory 
55 480 enn a sett order, So ue ме an <ol> opening t9 


хе» 
<Lipwalla walla, </A> 
stete city, 106/14> Al the list tems sit in the 


Ele of the <ol> element 


<iipsounciful, vre/14> эта te a dee 


чамала Chance, соза» 
enemy, sentio 
«этас or Consequences, me/14> 
Фейз 4 — fd here we tlie the cob cement 
esel, 14, aides 
+» 
2 sau some Burma Shave style signs on the side of 
the road today: 


<> 


Is «o1» a block element or inline? What about «145? 
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test driving tho list 


stæ Taking a test drive through the cities 


Make sure you've added ай the HTML for the list, reload your. 
“journal uml” file and you should see something like dis 


eee pun зе US ca my very own Sve! 
August 20,2012 | Here's the new and 


improved ls of tities 


Well I made it 1200 miles already, and I passed through some 
— Петар There's à linebrealc before the det 
P — Ae so <ol> must be a block element 
x I. Walla Walla, WA 


2. Magic City, ID 

Ê 3 Bountiful, UT Vel But thoes оаа after eaeh 
4. Last Chance, CO tem se is mute be a atk element oel 

5. Why, AZ 

6. Truth or Consequences, NM 


Notite that the browser takes care 
bE automatically теги eath ll 
Чет бо үө, don't have to) 


SGEE yr pu 


Mexico. Can you ra 
the list so. 12 
‘scorer? 
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building block 


Here's another ist from Tony's joumal: cell phone, iPod, digital camera, and a protein 
bar. Youll find itin his June 2nd entry. This is an unordered st of tems. 
Exekcise The HTML for this entry is typed below. Go ahead and add the HTML to change the 
items into an HTML unordered ist (remember you use c» for unordered ists) 
Weve already reformatted some of the text or you. 
When you've finished, check your answers in the back of the chapter. Then make 
these changes in your ошта hinl fle and test. 


<h2>June 2, 2012</h2> 


<img sro="segway1.jpg"> 
<p> 
My first day of the trip! I can't believe I finally got 
everything packed and ready to go. Because I'm on a Segway, 
to bring a whole lot with пе: 
cell phone 
ipod 
digital camera 
a protein bar 
Jus tials. As 
lao Tzu would have said, «pA journey of a 
па miles begins with one Segway.</a> 
</p> 
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there are no 


Dum! 
Q 


Do always have to use <ol> and > together? 


А: ve, you staut spon and a> MI 
FFT 
her fererb aleta realy agra tem: блп 

edt anie to, and бе > alaman dg 
Ten gater 


О; Can put tent or other samen inside an ар or a> 
sien 


No һе <ol> and <u> elements are designed Io work олу oh 
hé» element. 


O What about unordered iets? Can | make the butet ook 
dient 


2 Yes. Bat hold that thought. Wel como back lo that when we're 
тайа about CSS and presentation. 


О; wrat if wanted to put a la inside a ist? Can 1 do that? 


2 Yes, you sure сап. Make the contant ofany <Ñ» ether «cb or 
‘<u, and you have a hst witi a ist (what we call а nested is. 


P 
<Lipcharge Sequay</Li> Nested lit 
<lippack for trip 

<ul> Here's the 
li»cell pha de. E 
зарой Ц риа 
1isdigital camerac/11» уе nested 
lia protein ba“ 
ча» 
«ns 
<Lipcall monc/li» 
че» 
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uestions 


О); think basicaly understand how block elements and 
inline lament are displayed by the bowser, but totaly 
confused about what lament can go inside other element, of, 
as you say, what can be "tested" inside of what 


А: pats one ot be harder mings ун sah vit HINL тив 
imag улла gn wearing fra len гарип. a wet 
Shon yous ew ayo Fake sur you can ag e ndr 
тай ви ите cg to pack up and К etes aie 
toe fac, sce you eg up wet al ed. 


О: so HTML tas ordered and unordered isis, Ar there any 
er ist types? 


А: каш tr try: dln ss datin let 


Took Ike hie: Each item in the list 
Kat a term, <dt>, and 
E а асант <dd> 


<ай>йоаа signa common in the U.S. in 
the 19208 and 1930» advertising shaving 

producta, «/dd» 
<dtonoute 664/4 
famous road in the U.S. highway 


give a try 


pes 
вузтеп,</а› 


uma Shave? 


А: surma stare wasa company at ade tn song 
crm neat зато be 2 rry To egan aby 
air produet using adeps in 1928, and ssp produ 
be vary popular Gf somewa ting rv 


Tho signs were grouped in bunches of tour, fwe, ar six, each wih one 
ıine fom h slogan. At oa point, here ware 7.000 of hese signs 
ол roadsides throughout he United States. Mast ara gone now, but 
ben are 50 a few lef, here and there. 


www it-ebooks.info 


building blocks 


Putting one element inside 
another is called “nesting” 


When we put one element inside another element, we 
call that nesting, We say, “the «p» element is nested 
inside the <body> element.” At this point, you've 
already seen lots of elements nested inside other 
ements, You've put a <body> element inside an 


1» element, a <p> element inside a «body 


clement, а <q> clement inside a <p> element, and 
so on. You've also рш a <head> element inside the 

1» clement, and a «title» clement inside the 
head>, That's the way HTML pages get constructed, 


The more you learn about HTML, the more 
important having this nesting in your brain becomes. 
But no worries—before long you'll naturally think 
bout elements this way: 


4 inside qp» 
nested inside <body>, 
nested inside Мы 
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understanding nesting by drawing 


To understand the nesting 
relationships, draw a picture 


Drawing the nesting of elements in a web 
page is kind of like drawing a family tree, At 
the top you've got the great-grandparents, 

and then all their children and grandchildren 


belowe Here's an example. (^ | Pe es deem 


rn ean 


Let's translate thie 
into a diagram, where 
cath element becomes a 
be, and eath line connects 
the clement s another element 
that is rested within iÈ 


ФЬ is акау: the 
clement at the rook 
of the tree 


bel has beo nested 
ements <head> and 


<body, You tam tall them 
Beth “cre oF btn hod i nested within the <html> 


СС Чече, so we say bod the 
N Г Коч 
ex 


The parent of < 
ef pm, 
the parent of eis др, and 
the parent of адр u Enis 


Но и nested within 
the <head> бетен e J 
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Using nesting to make sure your tags match 


Your first payoff for understanding how elements are nested is that 
you can avoid mismatching your tags. (And there's gonna be more 
poet later just wait) 


‘What does “mismatching your tag" mean and how could that 


К iran siren rs 
| 
5 | Properly | 
4 nest 
ME ai 5 !oyor | 
ا‎ ite qu | elements | 
мл NE: p 


o far, зо good, but it's also easy to get sloppy and write some HTML, 
that looks more like this: WRONG: the <p> tay 


el en so going to tweet <en>this</p></em> be ле, 


K y i apposed t be mide 


the <p> clement 


Given what you now know about nesting, you know the <en> element 
needs to be nested fully within, or contained in, the «p» element, 


mmm — UE 
2 Ioe 


So what? 


Tes okay to mess up your nesting if you like playing Russian roulette, H you write HTML. 
Without properly nesting your elements, your pages may work on some browsers but not 
оп others. By keeping nesting in mind, you сап avoid mismatching your tags and be sure 
that your HTML will work in all browsers. This is going to become even more important 
as we get more imo “industrial strength HTML" in later chapters. 
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catching mismatched tags 


head» 
<title>rop 100</title> 
<body> 
Acres 100 
eee Side of the Moane/h2> 
<ha>rink Fioya</h3> 
<> 
There's no dark aide of the moon 
edle. 
als 
<ї4>зреак to 
bon The а 
<ui>rine</14> 
<li>the Great Gig in The skye/14> 
Ae lite 
e And Thes</em> 
<Lipany Colour You Like</14> 
Asad Damage</14> 
paec/14> 


Breathe</14> 
«no 


<h2>xandv</n3> 
pe 
<ol> 
азтан 
pre 
аз» 
Abele You 


BE the Browser 

Below, you'll find an HTML file 

with some mismatched tags in it. 
„ош job is to play like youre the 
browser and locate al] the errors. 
‘After you've done the 
exercise, look at the 
end of the chapter to 
see if you caught all 
the errors. 


et lets all 
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А bunch of HTML elements, in ful costume, are playing а party ч 
game, Who am 2" Theyll give you а clue jou try to guess who 

‘they are based on what they say. Assume they always tell the 

‘ruth about themselves Fil in the blanks to the right o identify 

the attendees. Also, for each attendee, write down whether or not 

the element is inline or block 


Tonights attendees: 


Any of he charming HTML elements you ve seen so far just Inline or 
might show up! Name block? 


Im pe heading, 


mall ready to link to another page. 


Emphasize tex with mo. 


ma lat but | don't have my affairs in order. 


Ima real inebreaker. 


im an item that Ives inside а list. 


Hoop my st tems in order. 


Im all about image. 


Quote inside a paragraph with те. 


Use me to quote tex bal stands on its own. 
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character entities are for special characters 


‘Twas just creating a web page 
explaining everything I was learning from. 
‘this book, and T wanted fo mention the <html> 
element inside my page. Isn't that going to 
mess up the nesting? Do I need to put double 
quotes around it or something? 


You're right, that can cause problems. 


Because browsers use < and > to begin and end tags using them in 
the content of your HTML can cause problems, But HTML gives 
you an easy way to specify these and other special characters wing 


ıa simple abbreviation called а character ші. Here's how it works: 
Tor any character that is considered "special or that you'd like 10 


1 use in your web page, but that may not be а typeable character 


їп your editor (ike а copyright symbol, you just look up the 
abbreviation and then type it into your HTML For example, the 
Characters abbreviation is sgt; and the < character's is ier 


Зо, say you wanted to type “The «осві element rocks in your 


page. Using the character entities, you'd type this instead: 
The eLeshtmlege; element rocks 


Another important special character you should know about i the 
& (ampersand) character. IF you'd like 10 have an бо your HTML. 
content, use the character entity атр; instead of the в character 
wel 


So what about the copyright symbol (hats &copyright}? And. 
all tho 


xher symbols and foreign characters? You can look up 
common ones at this URL: 


on for a more exhaustive list, use this URL: 


петр: / aux. unicode. ora / harte 
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О: wom, never knew the browser 
could pay so many deii 
charac Thar are a ton f dierent 
Characters and languages atte 
— ate, 


А: в ааш. here nee, 
"lera hea азама yo camur 
ийиге est идиш вто та! 
So ине you can rb aonb 
Desc rl tor e wel 
page tobe nat on ay owes beris 
пориве at you can degay al bae 
cries Ba. esp you ток song 
Жолу usas, you stou a gd 
Va o atat unt — 
charactors ае gaing ob oomo on ti 
— 


here are по 


Dumb Questions 


О: You said that & is special and I 
ned to use tho entity amp in its place, 
Dut to type in any entity have to use 38. 
So tor, say, the > enti, do I need to type 
pd 


o rol e sn bi pci 
rin) tau ite cua of 
ny ently So f parley Toto п 
Tour ently ame jtd oy ta, 


ust remember to use & anytime you type in 
an antiy, and Ifyou realy need an & in your 
Content, use атр; instead, 


building block 


О: vine ioked up the nts atthe 
voreácschoct соп, | noted hat each 
Sly has a number too. What do Iuse 
pron 


Yu can use either Ње number Ња 
A100 or he name of an ently in your HTML, 
(boy do ha same thing). However. nol all 
"ntes have names, so hose cases your 
only choc isto use the number. 


Crack the Location Challenge 


Dc Evel, in his quest for world domination, has put up a private web page tobe 
used by his evil henchmen. You've just received a snippet of intercepted HTML 
‘hat may contain a clue to his whereabouts. Given your expert knowledge of 
HTML, you've been asked to crack the code and discover his locaton. Here's a 
bit of the text from his home page: 


1 henchman meetup 
next month at my underground lair in 
#4208; sepsilon; stau; 64114; scum]; sigrave; stau; 


http //s Bethel tom amv. ebay 


the NTML and see at jer browser day 


na 


tasting 2 few elements 


Element — <в®сог@? ү, ө denent mate 


pom 


Ev Aem 
Soup pe ре 


vete. lke # yor are 
cu ED A Use this element for A 
Me <pre> formatted lest shen yor van 
cae yon thew Your bert 
pake Ik Yon time; dir коми, te show Yoor 
Emend stones: Bye qe tnde 
ne 
а> [un he tanker it 
5 ee mre 
verint. 
potenti L 
Letten le pers 
posae Need bo dopey a li? Say, a ak of Tian dest 
Rer e eL te (Eum 
m4 Ue the ale deve ime he? py 
Os pt your pane 
e СС буна 
rim ee ‘at instead, 
=» lea denne TH enh wali 
The eae dien ed cms te 
For playing code From a уаз may, ч 
د پا‎ Frew abode 


2 


Here are a bunch of elements you 
already know, and a 
few you don't. 


Remember, half the fun of HTML 
is experimenting! So make some 
files of your own and try these 
out. 
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building bl 


Rockin’ page. Is perfect for 
my trip and it really does a good job of 
providing on online version of my journal 
You've got the HTML well organized too, so 
Т should be able to add new material myself. 
Se, when con we actually get this off your 


computer and onto the Web? 


n xi POINTS. 


Plan he structure of your web pages before you 
start typing in the content. Start with a sketch, 
than create an outine, and finally we the 
HTML, 


‘= Pian your page starting with the large, black 
elements, and then refe with inline elements. 


= Remember, whenever possible, use elements to 
tel the browser what your content means. 


* Always use the element hat most closely 
matches the meaning of your content. For 
‘example, never use а paragraph when you 
need alist. 

= <p>, <blockquote>, «c», <ul>, and <i> are 
al block elements. They stand on their omn 
and are displayed (у default) with a nebreak 
above and below the content within them. 


= <> and <em> are inine elements. The content 
in these elements Поне in ine with the rest of 
"he content in the containing element. 

= Use the <br> element when you need to insert 
your oam inebreaks. 


Void elements have no content. 
Avoid element consists of only one tag. 


An ‘empty’ element has по content. But it does 
have both opening and closing tags. 

Anested element В an element contained 
completely within another element. If your 
elements are nested properly, al your tags wil 
match correctly. 


You make an HTML ist using two elements in 
combination: use <ol> with <i> for an ordered 
list use <ul> with <> for an unordered ist 
When the browser displays an ordered ist it 
creates the numbers for the ist so you dont 
have lo. 

You can build nested lists within ists by puting 
«ob or <u> elements inside your <i> elements. 
Use character entes for special characters in 
your HTML content. 
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right brain resting station 


HTMLeross 


Mes ime to give your right brain a break and put that left brain to work: all the 
words are 


are HTMerelated and from this chapter. 


Across Down 

1. Топуз transportation. 2. Left together in a T-bird. 

8. Famous catchy road signs. 3. Max speed of a Segway. 

10. <q> is this type of element. 4, Tony won't be doing any of this. 

11. Another void element. 5. Putting one element inside another is 

13. Element without content. called this. 

14. Major building blocks of your pages. 6. Requires мо elements. 

is Use <ol> for these kinds of lists. 7. Block element for quotes. 
8, Use <ul> for these kinds of lists. 
12. Void elements have none. 
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building blocks 


Heres Ве ower of Tony's Lao Tau quote using the р element Did 
cig Hohe renate, 


lotion 


Here's the part that change 


<> 


My firat day of the trip! т can't believe т finally go 


ked and ready to go. т 


Seguay, T wasn't able to bring a whole lot with met 
al 


ке aed te <p teins 
E kag before the start of the 
Whee ad the </a> dang tat 


er a thousand miles Begins with ane segway:</q> se very end 


И наме that че aso 
а the double melts 


cell phone, iPod, 


mera, and a protein bar. Just 


essentials. As Lao Tzu would have said, n Journey 


And here's the test ee, qma 


Okay, b doesn't LOOK ary My first day ofthe wip! T can't believe 1 лау got everything 
йер but don't ү PEEL e 

ese pore а r таа, 

М E RT аа пева. 


Couey af «tan miles begins wilh one Segury ^ 
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Here's another ist from Tony s journal: cell phone, iPod, digital 
‘camera, and a protein bar. Youll find it in his June 2 entry. This is an 
unordered ist of tems. 

Make these changes in your ‘journal htm fle, too. Does it look like 
you expected? 


azane 2, 20126/m2> 


<img are" segvay1. p> 
+» 
ч» TE рд, end the previous вә 
S < Start the unordered list 
Assel phone 1t» p 
pL FS Put each item into an <li> element: 
<Ubdigital canera</14> 
«Шана а protein bare/11> bed the unordered list 
</ul> — ^ 
E 4 Ad ve ved 
* = do start à new paragraph 
lao Tau aid, «ара journey ot a 
thousand miles begins with one sequay.</q 
E 
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BE the Browser 
Solution 


p m 
pod 

<title>Top 100e/title» Missing </head> дета 
oap. 
percer C Ming «sl» tlosing t39 


адолат Side of the Moone/MZ» 
rink Fioyde/h3> 


> 
there's no dark side of the moons matter of fact it's all dark 

deve — > and <p ave nok nested 
Asbest to Me / Breathee/1ip Properly: the </p> tag should 
чоп the ee, tome af ter the </a> tag, 
атыц» 
Abbe Stent cig in the skye/1i> m 
pne We have à clesing «Гето where 


Minus And Themefem> A odd have a Closing </li> tag 
zany Colour You Аке у> 
SLibprain Damage</14> 


NT n 
Se match any opening «p ta 
Benate 


Баабу ®—— We mined up the losing </h2> and Hes tags on these headings 


O зале one O We started an <ob lst, buk its 
азирше тет alehed with a closing </ul> tag 
Abende shadows 
prem 
prem = We're missing all our 
«бэкапа дош </i> tage 


li»spesd of sound 
>а Message 

айылы 

<Lipiiardest part 
Mli»swallowed In The Sea 
<Liptwisted Logic 


чш» do doesn't makeh the opening <ol> tag at the start of the list above 
hasas &— Here's our missing </head> tag, but vere missing a closing He tay 
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exercise solutions 


А bunch of HTML elements, in full costume, are playing a party 
game "Who am I?" They gave you a clue—you tried to guess 
"who they were based on what they said. 


Tonight's attendees: 
(Quite а few of the charming HTML elements you've seen so far 
showed up for the ралу! 
Inline ог 
Name block? 


-— 


Im tha #1 heading. Clements not 


I'm all ready to link to another page. 


лонаи taxî wil те. T. 


I'm айы, but don't have my afar in order. ird ber 


[^y 


I'm a real linabreaker. 


| keep my ist tems in order. 


(man tem that Wes inside аа, li block [зл 
к ШТ 

inline фе 

Quote inside a paragraph wi те. A. a 


Solve 
bl 
Use те to quote text that stands on ts own. blockquote — block. 


im ай about image. 
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building 


SEGWAY 
em т а Û м 
оон Bm у BURMASHAVE 
INLINE Hu ut E 
s 0 5 o H ADE т 
Ы G Ba 5 N 1 
g [n VOID 6 N 
Q Nye 6 
U Ы Û 
BLOCKELEMENTS 
т ND 
ORDERED T 


Crack the Location Challenge 


The’ going w be mul henchmen тегир vt mrt 
You tod have locked up eath entity amy vado ш а Deh, Cone Jol ш. 


or typed them in |n either case, the 
answer locks like Detroit! 
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4 getting connected 


+ 
A Trip to Webville „ 


We're going 
to Webville Мете 

leaving our dusty оГ local 

filesystem behind for good. 


Web pages are a dish best served on the Internet. 
Зо far you've only created HTML pages that live on your own 
computer. You've also only linked to pages that are on your own 
computer. We're about to change all that. In this chapter we'll 
encourage you to get those web pages on the Intemet where all 
your friends, fans, and customers can actually see them. We'll also 
reveal the mysteries of liking to other pages by cracking the code 
of the h, 4, p, / ſ ui w, w. So, gather your belongings; our next 
stop is Webvile. 

WARNING: once you get to Webville, you may never come back. 
Send us a postcard. 
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getting on the wot 


Remember me from 
way back in Chapter 1? You 
Were going to get the Starbuzz 
website online so our customers 
could actually see й, 


Getting Starbuzz (or yourself) 
onto the Web 


You're closer to getting Starbuzz- or even bette, your own site 

оп the Web than you might think. All you need to do is find a 
ompany" (we'll call this a "hosting company" from. 

now on) to host your pages on their servers, and then copy your 


‘web hosting 


pares from your computer to onc of those servers, 


OF course it helps to understand how your local folders are going 
чо “map” to the server's folders, and once you put your pages 
оп the serve, how you point a browser to thera. But we'll get t 
all that. For nov; let's talk about getting you on the Web, Here's 
what you're going to need to до: 


© Find yourself an hosting company. 


namo for your site (like 
www.starbuzzcoffee.com). 


computer to a server at the hosting 
company (there are a few ways) 


0 
Ө Find a way to get your files from your 
o 


Point your friends, family, and fans 
to your new site and let the fun 
begin. 


We're going to take you through each of these steps, and ev 
if you're not going to set up a website online right noz, follow 
along because youl learn some important things you'll need 


to know ater So get ready for a quick detour from HTML. age 
[2 
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Finding a hosting company 


"To get your pages on the Web, you need a server that 
actually lives on the Web fl ane Your best bet is to find 
а hosting company and let them worry about the details 
of keeping a server running, No worries, though; finding a 
hosting company is fairly straightforward and inexpensive. 


Which company? Well, we'd ceto sign you up for web 
hosting at Head First Hip Web Hosting, Ine., but that 
Фосл really exist. So, you're going to have to do a little 
homework on your own. While finding a company to host 
your pages isn't difficult, is kind of like choosing a cable 
TV company: there are lots of options and plans. You really 
have to shop around for the best deals and for the service 
that works for you, 


he good news is that you should be able to get started for 
almost nothing out of your pocket, and you сап always 

upgrade later if you need additional features. While we 

can't suggest a particular provider, we can tell you а few 

things to look for in a provider, and we also list a few of the 

тоге popular providers at 

nttp?//wickedl yenart .com/hosting-providers/ 


e 


> You don’t have to 
drr e 
Relax tn 


hie is at 
are scaly 
pe 


sour own computes 
ow along fe he nex 


escas, low slong rc 


few pages эз you know h 
fas gether 


е 
@ One-minute hosting guide 


We can't lel you everything you need to know 
‘about geting a hosting company (ater all 
this book is about HTML and CSS), but were. 
going to give you a good push in the right 
direction. Here are some features to think 
about while youre shopping. 


* Technical support: Does the hosting 
company have a good system for handling 
your technical questions? The better ones 
will answer your questions quickly either 
over the phone or via етай 


"= Data transfer: This is a measure of the 
amount of pages and data the hosting 
company wil let you send to your visitors 
during a given month. Most hosting 
companies offer reasonable amounts of 
data transfer for small sites in their most 
basic plans. If you're creating a site that 
you expect will have lols of visitors, you 
тау want to carefully look into this. 


* Backups: Does the hosting company 
regularly make а backup of your pages 
and data that can be recovered in the event 
that he server has a hardware fure? 


* Domain names: Does the hosting 
company indude a domain name in its 
pricing? More about hese on the next page. 


"= Relabilly: Most hosting companies report 
keeping websites up 99% of the time ог 
better. 


= Goodies: Does your package include 
other goodies such as email addresses, 
forums, or support for scripting languages 
(something that may become important to 
youin the future)? 
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A Web Detour 


domain 
HELLO, my‘name is... 


Even if you've never heard of a damain name, you've seen and used a 


zillion of them; you know... google.com, facebook.com, amazon.com, 


disney.com, and maybe a few you wouldn't want us to mention. 


So what is a domain name? Just a unique name that is used to locate 
your site, Heres an example: 


the domain name 
Brames 
uzzcoffee.com 
—.— 
^ 


Ё 2 

bere are different doxan "od 
m for diferent erus 
nane of a specifie «8; and also for di 
Sede tok, cop, and 
die pe 


pem 


ferent омех 


There are а couple of reasons you should care about dow 


names. If you want а unique name for your site, you're going to 
need your own domain name. Domain names are also used to link. 
your pages to other websites (we'l get to that in a few pages) 


There is one other thing you should know: Domain names are 
controlled by а centralized authority ICANN) to make sure that 
only one person at atime uses a domain name. Alo (you knew it 
was coming), you pay a small annual registration lee to keep your 


How can you get a domain name? 


The easy answer is to let your hosting company worry about i 
They l often throw in your domain name registration with on 
their package deals. However, there are hundreds of com 

that would be glad to he 


you сап find a list of the 


hetgi/esu.internic.nat/ceqist html 


As with finding a hosting company, we're afraid we'll have to leave 
you to find and register your own domain name. You'll probably 
Find that going through your hosting company is the easiest way to 
get that done. 
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After years of 

struggling, we finally 

have our very own 
domain name. 


О: wany i it енеда "domain name" 


Д: волани are tts 1 
otk musa cn пана 
vex rane, Moy ha tati 
Can aita coram name: You nud 
— Ваша e same 
danas nae ia тирии tute 
— — 
dee, 
ede 


О; ni were going to get the domain 
name for Starbuzz, wouldn't iwant to 
Set he name www starbuzzcaffee com? 
Everyone seems to use websites with the 
www at the fron 


dero tre te 
Dumb Questions 


Again, don't confuse a domainname 
wih a неће пале: slarbuzzcofoe com is 
ıa domain name, ile энин starbuzzoaflee. 
соп is he name of a webs. Buying a 
‘domain is Ike buying а plece of land; lets 
ау 100mainsrot com. On that land, 
you can build as many webstas as yOu 
ike, lor example: һоте.100тапшев. 
соп, toolshed 100mainsteet com, and 
‘outhouse. 100mainstreet com. So wv. 
Sade com в just one wobste (n the 
‘Sarbvzooe com domain. 


О: ииз so great about domain 
name anyway? Do I realy need one? My 
hosting company says can just use their 
name, were es nu com? 


A Web Detour 


that maate your needs, there is 
noting wrong with using her nama. Bul 
(and its a big but) here's the disadvantage: 
should you ever want to choose another 
hosing company, or should hat hosting 
company go out ol business, hen everyone 
wha nous your sta wil no lenger be able to 
asiy fad И, on tha other hard, you have 
ıa domain nane, you can just take tat with 
you to your new hosting company (and your 
users wil never aven know you've switched). 


О tomain names are unique, tat 
means someone might already have mine, 
How can lind out? 


Good question. Most companies that 
provide registration serves for domain 
names alow you to search to see ifa name is 
"alan (елй ot Ike searching fer vanity icense 
plates). You Ind a Ist ol hese companies at 
pn iri ettet him 


Here’ an exertte yeu relly need to go off and do on your own We'd love 


ds personally hel 
Feedin 


DO fry this af home 


here's only £0 much you Can a 


OF beak authors (and 


ab while youre on vation is probably aut too) 


Its time to seek out a hosting company and grab а domain name for your site. Remember, you can 
visit Wickedly Smart for some suggestions and resources. Also remember that you can complete the 
book without doing this (even though you really shoul) 


My Web Hosting Company: 
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тт 


Moving in 


Congratulations! You've got your hosting company 
lined up, you've found a domain name, and you've 
кога server all ready for your web pages. (Even 

if you don't, keep following along because this is 
important чы) 


Now what? Well, i's time to move in, of course 
So, take that For Sale sign down and gather up all 
those без; we're going to get them moved to the 
new server Like any move, the goal is to get things 
moved from, say, the kitchen of your old place to 
the kitchen of your new place. On the Web, we're 
ust worried about getting things from your own root 
folder ta the rot folder on the web server, Lets get 
hack to Starbuzz and step through how we do this. 
Here's what things lok like now 


ңе e reot Felder 


Remenber or 
Starbuzz pages? There 
are two: the main pade 
(rde iml? and the 
pane that contains 
he mission tatement 


auei Here's the new web server. The 


hosting company has ead 
treated a rot folder For ou 
‘which i where all your pane 
are going $o go. 


edle, where the 
erer . 


Here's the new website ere Weve 

sing the баало Йе tom 

domain ince we beat you to it, ue 
Yell have o ме Your owm domain 

rime instead). www.starbuzzcoffee.t 
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there are no 


Dumb Questîons 


О: Waita soc, whats he “root tidor” A : Notat at. Hosting companies cal root 


эы r gee eg 
уруунун 
Ae ee 


{ust bean he oper fide lr your copy your fis tok (we'l get to bat in a sec) 
ages. On the web server, he root alder 

becomes even more important because 5: So et me make sure understand. 
anything inside Ihe rot folders going tobe Мезе been putting all our pages for the 


csse on the Web. йв in one folder which we cal the root 
folder. Now were going to copy al hat 

О: y hosting company seems to 

к called my root folder 


^mydomain com". le that a problem? 


A Web Detour 


act You're going lo take айтте 
‘pages on your oun computer, and put 
‘thom all inside your йз root oder on he 
hosing company server, 


О: wnat about мове, the the 
images" folder? Do I copy those too? 


fes, you've basicaly going to replicate 
al the pages flas, and folders in your own 

real folder onto the server. So f youve gt 

an mages” folder on your computar, youl 

"ave one on the sever to. 


Getting your files to the root folder 


пок one step away from getting Starbuzz Coffee on the Web: 


and all you need to do is copy your pages aver to that folder. But how 
do you transfer fles to a web server? There are a variety of ways, 
but most hosting companies support a method of file transfer called 
FTP. which stands for File Transfer Protocol. You'll find a number 
^f applications out there that will allow you to transfer your files via 


FIP; we'll take a look at how that works on the next page. 


Here's the root 
Falder on the serve 


| P 


The Fes are sting 


your computer: 


2 


E 


Я 
7 


Af 
(fos мей to transfer be- 
do the server, and then 


efl be "lve" on the Web 
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As much FTP as you can possibly fit in two pages 


Seriously, this really san HTML and CSS book, ut we didn't want to leave you up a creek 
without a paddle. So, here's а very quick guide to using FTP to get your fles on the Web. Keep 
in mind your hosting company might have а few suggestions for the best way to transfer your files 
to their servers (and since you are paying them, get their help). Aller the next few pages, we're of 
ош detour and back to HTML and CSS ший wr reach the end of the book (we promise). 


Well assume you've found an FTP application. Some are commandline driven, some have 
complete graphical interfaces, and some are even built into applications like Dreamweaver and 
Expression Web, They all use the same commands, but with some applications you type them in 
yourself, while in others you use а graphical interface. Here's how FTP works from 10,000 feet: 


— Л ева 
матэм anû rend эрй The word “fale 
O First, connect to your server using FTP. 2 мүш эчү are 
interchangable Most 
FTP анана we 


ope = 


1j www starbuzzcoffee com e sure youre in Ehe 


ather words mak before 


E чы eu 
Use the "cd" command to change your current directory to yor а 0 
же directory where you want to transfer files, 


po 
ud 


cd starbuzz us _ 
i ace Б 
[=] new 
0 www starburzeoffee cen 
Tenders a copy of the 
i а inde inte the 
the sever 


т” Xe : 


www storburscol fee com 
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Ts Tebar 


@ You can also make a new directory on the server with | 
st йе making а new f 


the “mkdir” command, 


an only Youre 
on the serer, not 7 en tonte 


wiw. starbuzzcoffee com ‚аде the 
bias directory 


on the server 
(B) You con retrieve files too, with the “get” command. 


get indexhtnl 


се, = 9 


[— ~| pum. m fie m tr Dre 


V m to your computer 


эрби tone vith meth friendlier 
тее ul fats w feel re bo ser vist ower 
жаыа interfaces fe fret 

ДЕ үле ш ne of the 


FTP commands 


Whether youre typing in FTP commands 
‘on the command ine, or using an FTP 
application with a graphical interface, the 
commands or operations you can perform 
эге prety much the same. 

* dir get a ising of he current directory. 


"ct change to another directory. ".* 
means up one directory here, be 

* pwr display he curent directory youre. 

= put <foname>: vansters ће specified 
"lane to he server. 

* get«fienamo»: relieves the spectod 
Flename from he server, back o your 

computer. 


Let’ put all that together. Here's an example of 
FIP being used from a command-line application: 


TTE НЕр Тат 
offe, com 
— 
Mane: headfirst 
Password: ення 
230 User headfirst logged in 


fuo die penu 
co eB e ET 


dre 
fu» cd starbuzz <, Change bo the m 


CID comand eu. bnza drertory 
bees put index.html Teste index hbal 


erect and login 


tory of 
[satia бее 


eS зы р 

Ru лш сеа л 

E F 
e index html. 


Male a directory fr images, and 
then ut ving бе bye Command 
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Web Defoe 


y 
О: uy hosting company td me to use 
SFTP. nol FTP. What's the recs? 


Å SFTP or See Fie ran rca 
ist ro ut vi ТР иода 
rat ho sano way Jus rias put 
FIPapicon prs SFTP ture yi 
rates purchase. 


О; so dol at ny ties on my 
computer and thn Талаш hm each 
tine Iwano update my sts? 


=== 


and Windows: 
For Mac OS X: 


For Windows: 
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A] Polis FTP applications 


there are no 
Dumb € Questions 


2 Yes, for smal stas, that is normaly 
Ihe way you do tings. Use your computer to 
"ost your changes and maka sure ings are 
working the way you want before transfering 
your fles lo he server. For largor webs, 
organizations ofen create a test ile and a 
lve sile so that thay can preview changes 
en he lest she before ey are moved lo the 
he sia 


M youre using a tool Ike Dreamweaver 
Сода, has оов wil alow you to test 
your changes on your own computer, and 
"hon when you save your fles, hey are 
automatically transfered о the webste 


Here are a few of the most popular FTP applications for Мас 


= Fetch (nilpiifelchsofworks.coml) is one of he most popular 
FTP applications for Mac. $ 


‘= Transmit f tp / evi panic com/transmit).$ 
= Cyberduck Hh ebe duct c). FREE 


. smart FTP (htputwww smartp.comidownioad). $ 


* WS_FTP tb ufd com. FREE for the basic 
version, $ for the Pro version 


Cyberduck (ntpileyberduekchl). FREE 
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O can udt my fies ety on he 


— podia nan 
Yau ve vi e ш or caren жа 
Erros beira you nava bre prow and 
pres 


That sald, some hosting companies wil alow 
you lo og into th server and make changes 
опе saver. Todo that, you usually need 
октон your way around a DOS or Linux 
command prompt, depending on what kind 
‘of operating sysler your server s runing. 


Met FTP 
eben have a 
al ee. you tan 
dounload to try 
Velo yoo buf 


getting connect 


DO try this af home 


Its another homework assignment for you (check each item as you do i 


С) Make sure you know where your root folder is on ће server at 
your hosing company. 

O Figure out he best way (and the best lool to use) to transfer 
ев trom your computer to ће server. 

[For now, go ahead and transfer the Starbuzz index hir and 


“mission. him ies to the root folder of the server. gie 
Ex 


Back to business... 


That's the end of the detour, and we're back on the web 
superhighway: At this point, you should have the two 
Starbuzz pages, “index html” and “mission unl, siting 
under your root folder on а server (or if not, you're at least 
following along). 


After all this work, would 
make your browser retrieve those pages over j 


it be satisfying to 


the Internet and display them for you? Let's 
figure out the right address to type into your 
browser 


Web pase addresses start 
with http. Well look into 


what EP means in à set. | | 
S b J 


v 
http://  www.starbuzzcoffee.com  / index.html 
^ f ^ 


| For the root folder And here's the 


website name 


dee ve jet se "7 Tate Filename. 
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uniform resource locators 


vel 
Mainstreet, USA 


You've probably heard the familiar “h "^ "t" “р” "colo 
‘sash “slash” a zillion times, but what does it mean? First of 
all, the weh addresses you type into the browser are called 
URLs oF Uniform Resource Loca 


If it were up to us, we would have called them “web addresses," 
but no one asked, зо we're stuck with Uniform Resource 
Locators. Here's how to decipher a URL: 


the website nane 
A this point, You 
row all abo 


path to the resource, you can create 


a web browser to retrieve it for you 


HITE 


using some protwo—usual 


ome on down to 
6 


134 
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A Uniform Resource 
Locator (URL) is 

a global address 

that can be used to 
locate anything on 
the Web, including 
HTML pages, audio, 
video, and many other 


forms of weh content. 


In addition to 
specifying the location 
of the resource, a 
URL also names the 
protocol that you can 
use to retrieve that 
resource. 


getting connected 


What is HTTP? 


HTTP is also known as the Hyper Text Tian Pr 
it an agreed-upon method (a protocol fort 


eol. In other words, 
ferring hypertext 
documents around the Web, While “hypertext documents" are usually 
just HTML pages, the protocol can also be used to transfer images, or 
any other file that a web page might need. 


HTTP is a simple request and response protocol. Here's how it works: 


HTTP request: could I please have 


the file /index html? 
S 


[ii EY 


HTTP response: I found. 
‘that file: here itis, — ~ 


www starbuzzcof ее сот 


Whatever you do, 
dorít pronounce URL as 
“Earl,” because that's my 
тоте. H's pronounced 
URL. 


So each time you type a URL into your browser's address bar, the 
browser asks the server for the corresponding resource using the HTTP 
protocol I the server finds the resource, it returns it to the browser and 
the browser displays it What happens if the server doesn't ind it? 


— — — HTTP request: could 1 please have 


the file /hardtofind html 
id 


SD 


HTTP response error 
#404: T cant find ___ 


www starbuzzcoffee.com 


If the resource 


Jt be found, you'll get the 
Which the server reports back to your browser. 
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absolute paths io your files 


What's an absolute path? 


The last ime we talked about paths, we were writing HTML to make inks with 
ment. The path we're going to look at now is the absolute path part 
ага URL, the last part that comes after the protocol (hip) and the website name 


An absolute path tells the server how to get from your root folder to а particular 
page or file. Take Earl's Autos site, for example. Say you want to look in Earl's 
inventory to see if your new Mini Cooper has come in. To do that, you'll need 
to figure out the absolute path to the file “inventory” that isin the "new" 
folder. АП you have to do 8 trace through the folders, starting at the root, to get 
tothe “new” folder where his “inventoryhiml" fl is located, The path is made 
‘up of all the folders you go through to get the 


Бо, that looks like root (we 
moryhiml”. Here 


resent root with а 9/7), “cars”, “пе”, and finally; 
how you put that all together 


the file жей, “1 


Earls А 
root folder 


Мәр start 
at 


* 


D 


Mc — оз 


КУЛ 


In between the folder 
rames, pot aM" te 
den be- separate 


5, 


Ard then add on 


the Flename 
> inventory html 


емде p | 
inventory htn!" 
D ears /new/inventory html 


16% 
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O wrat is important aout ihe 
absolute pa? 


there are no 
Dumb € Questions 


А: tye att nose ninos ts 
жааш anda Ut qu c 
eee abet 


. tl resources) ast Web. How? Tha 
net to locate lhe fla you are aqusing, 00005 par tel Но browser he method 
ithe server didnt have an absolute pat «should use to relieve the resource (in 


would know where lo look. 


О: teat et understand ве pieces 
(procos, sever, websites and 
absolute pta bum having trouble 
Connecting them. 


protocol 


most cases, his is HTTP, The website 
тап (uhich consists ol the saver ramo and 
"ho domain rame) tls the browser which 
computer on e ете o gat the resource 
"rom. And е absolu рай tals a server 
what page youre ar. 


О: we teamed to pit roti paths 
in The href tbe our ce» elements. 
Hw can the server find thoes ink i 
they aren't absolute? 


Wow, great question. When you cick 
опа ink tha relative, behind те scenes 
"ho brouser creates an absolute рай out of 
"hal relative path and the path ol he page 
"hal you dick on. So, all Da web server ever 
sees are absol paths, tanks lo your 
browser 


О: молан help the browser tiput 
absolut paths in my HTML? 


J Ah, another good question, but hold 
thal hought—wel get back to Ihat ina sec- 


You've waited long enough. Its time to give your new URL a spin. Before you do, fill 
in the blanks below and then type in the URL (like you havent already). If you're 
having any problems, this is the time to work with your hosting company to get 
things sorted out. If you haven't set up an hosting company, fil in the blanks far 
www starbuzzcoffee.com, and type the URL into your browser anyway. 


website name 


absolute path 
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Td like my visitors to be able to type 

“hitp://wwn-starbuzzcoffee.com and 

not have to type the "index html", Is 
‘there a way to do that? 


DT ay ac бе 
4 Мег" But they're 
i ) 


Yes there Б. One thing we haven't talked about is what 
happens if a browser asks far a directory rather than a file 


/ 

from a web server. For instance, a browser might ask for . 

http://w. starbuzzeoffee.con/inages/ ge,, 
ر‎ e ro 

5 


http: //woe.stazbuzzcoffee.con/ The rook dietbory itsel 
When а web server receives a request like this, it tries to 

locate a default in that directory Typically a deful fle is 
alied “index herl" ог “dele ити" and if the server finds 
опе af these files, it returns the fle to the brouser to display 


So, to return а fle by defi from your root directory (or 


шү or dinean eranc eckt , e. 
Жш Te wit 
И iie eet 


sever they ме 


But T asked about 
“http://www storbuzzcoffee con, 

Which looks a little different, It 
doesn't have the ending "*. 


Oops, you sure did. When a server receives a request like 
yours without the trailing / and there s а direc 
that name, then the server will add a 

So if the server gets а request for 


ling slash for you. 


http: //www.starbuzzcoffee.com 
it will change it to: 
http: //www.starbuzzcoffee.com/ 


which vil cause the server to look for a default file, and in 
the end it will return the file as if you'd originally typed: 


http: //vwew.starburzcoffee.com/index.html 
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How default pages work 


Ther types 
O berge con/drinks/ 
ie the rone 


[ | 


=> 


Ө HTT response: you asked for 
a directory, butt found index 
him in that directory, so thats 


— 


what n sending back 


О: во anyone who comes to my ste 
vet the URL нории pst com is 
oing to see my "ndr page? 


А: npo ost tti 
depending cha of wab sava ye 
тойу inpr vam Na a uu 
Pur vtt aro T end тайа 
Moral wb savar ey) 


HTTP request: could I please 
have the file “/drinks/"? 


\ 


www starbuzzeoffee.com 


Шегејаге по 
Dumb Questions 


There are other possible диги! бегате, 
Же “index php’, hat соте into play you 
start wing scripts to generate your pags 
Thats way beyond this ook, but at doesnt 
‘mean you wont be doing Itin he future. 


О: so hen tm ging someone my 
URL is te beter to include he 
"index hm part or not? 


The server says, "That looks 
like a directory: is there a 
default file in that directory?" 


P л 
Server locates a default 
ite called "index html in 
the drinks directory. 


Ac essay boner lo eave nor 
‘hain ho kure you ctange алое 
nehar ana ss arab ao 
mane etn? Or you sat wg 
‘as and use e nae dc? Ten 
Tia URL you agen gave oul одао 
конт 


139 


practicing « 


Earl needs a little help with his URLs 

Ea may know Ear, but ће does know ФАЧ. He nge ite hep figuring othe 
URL for each of he fes below, labeled A. B, C. D. and E. On the right write inthe 
URL needed lo тайене each corresponding Пе from wm, earisautos com. 


їз root folder , 


E 8 
© 


Ч 
юр 
П 


ТҮ 
0 
Е 
H 


i 


& 
П 
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getting connected 


Write the URL here 
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linking to other web pages 


Fantastic! Were. 

up and running on the 

Web, Em already hearing 

great buzz about our site 
in the stores, 


By the way, weve got a 
new caffeine awareness 
program: we figure if were going to be 
pumping people full of caffeine, we wont them 
to клон how to take it to the limit. Can we point 
people to the caffeine information over on 
wickedlysmart com/buzz from our site? 


How do we link to other websites? 


URLs aren't jut for typing into browsers; you can use them right in your 
HTML. And, of course, right on cue, the Starbuzz CEO has a new task 
for you: make a link from the main Starbuzz page ever ta the caffeine 
information at http: //eickedlyanart.. com/boz2. As you can probably 
guess we're going to throw that URL right into an <a> element. Here's 
how: 


http://wickedlysmart.com/buzz">Caffeine Buzz</a> 
— ͤ—— 


| 


We've put a URL in the ref. Chel 
wil ее a page rom байраа bas 


That's all there is to i. To link to any resource on the Web, all you need is its 
Uniform Resource Locator, which goes in the <a> element as the value of the 
cot attribute, Let's go ahead and add this in the Starbuzz "index.html" pag 
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getting connected 


Linking to Caffeine Buzz 


Open your Starbuzz "inde hmi" fle in the "chapteri/starbuzz" folder, and scan down to 
the bottom. Lets add two new links: a relative ink to the mission statement in 

‘mission html", and a link to Caffeine Buzz, Make the changes below, then save and load 
your "indes hmi" Ше in your browser. Click on the link and enjoy the Caffeine Buzz 


аы 
<head> 
<title>starbuzz Coftece/title> 
ауе type="text/css"> 
body | 

background-color: Ad2basey 
margin-left: 204; 
margin-right: 20%, 
border: 2px dotted black; 
padding: 10рх 10px 10px 10px; 


font-family: sane-serit; 
</style> 
</head> 
body» 
Mhiscrarbusr Coffee Beverages</h1> 
<М2эношге Blend, 51,49</h2> 
Der smooth, mild blend of coffees from Mexico, 


Bolivia and Guatemala. </p> 


<h2>mocha cafe Latte, $2.35</h2> 
<prspresso, steaned milk and chocolate syrup.e/p» 


<h2>cappuccino, $1.89</h2> 
<P>A mixture of espresso, steamed milk and foam. </p> 


шем! 
schal Tea, $1,85</h2> ded be ik йе 
Spon spicy drink made vith black tea, spices, ie Ths wer a dat 
ышым йек 
EA x ve aged a or de 
ls en tre 
EERE rat en 
ES e erent 
end the <a hrefm"http://wickediyanare com/buza">caffelne suzs</a> 
</p> 
ee KL Heres here we 
p le here vee 
And we've added sone structure added the lnk to the 
бен by grouting the aks эд Med toes page 


tent into a paragraph 


you are here + 1443 
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testing those links 


And now for the test drive... Fage with the 
st at we planned. 


5 
киюе | 


EE | 
< Cappuccino, $1.89 
FFF 
Chai Tea, $1.85 | 
i 


| Ане. rk mace in Backes, spes ik ane none. 


кг | 


Here's the new lnk. Notice, we or 
inked the words "Caffeine Buzz. 
io it looks a little different: from 
the other line 


а У. osos | 


Lo | 


‘And when you elek onthe Imk, 
‘your browser vill make an HTTP 
request to dad 

buzz and then display the vest 
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‘At Caffeine Buzz, we use 
relative links to other pages on 
our site, and URLs to link offsite, like 

wor caffeineononymous com. 


o 


there ara no 


Dumb Questîons 


О): seme ika here are мо ways 
to Tink to pages now: relative paths 
and URLs. 


Д: restive pale can on te e 

^o itk 1o pagas ain De али ые 
She URLs e pay sedo to 
ster sett 


О; wout be sasior iust 
su Us tom oun 
Pages and outside pages? That wouid 
— 


Sur, i would wer, but he 
а duplo reasons you dont vant o. 
по thare. One problem в that URLs 
are hard to manage when you have a 
Jot ot ham in a web page: they're long 
dificult o edit, and hoy make HTML 
moro difci to read (for you, he pape 
ано. 


Also, you have a йе with nothing 

but URLs that Ink o local pages and 
you move the site or change its rame, 
you have to go change all hose URLS 
отед the new location. If you use 
relative paths, as log as youe pages 
stay in he same sat ol folders —because 
the Inks are ali relalve—you dant 

have о make any changes to your <a> 
slemeni href овце 


‘So, use relative inks to ink to your own 
pages in the same se, and URLs o ink 
1o pages at other slat. 


О: haven't we sen one other 
protect? kept seeing "le" 
before we started using а Web ser 


А: ves: goo caen To ne pot 
in un ranae a пр Be 
тач ой yow отш зонта 
Pati UR, “chart 
deci lt woe eo 
ich aot me pa 
“hater T pa may ook 
‘Ste sependra on ао 
rim and oe 


(ne important thing to notice in case 
you ty to ре ina fle URL is hat he 
fie URL has тов slashes, not мо, Ike 


HTTP. Remember it his way if you take 
‘an HTTP URL and delete the website 


тате youll have hree slashes, o. 


QG are there tr pte 


Yas, many browsers can support 
"uova ot pages wih the FTP protocol, 
and hete is a mal protocol hat can 
send dala va emal. HTTP ls he 
protocol youl be using most of the ime. 


О: ме seen URLs that look ike 

be hp mydomain cpo 
index ml. Why is there a ^00" in 
re? 


Tho 8007 is an optional ‘port 
tha you can putin an HTTP URL. Think 
fa port ike his: the website name 

ls Ike an address, and the porlis ike 

э mailbox number at an address (say, 
inan apartment complex). dea 
‘everyting on the Web в dlvered lo a 
‘etal port (hich is 80), but somelimes 
web servers are configured о receive 
requests ala diferent port (ike BO00). 
‘oul most Беу so his on test servers. 
Ragular wab servers almost aways 
accept requests on port 80. If you dont 
specify a port, t defaults lo 80. 
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time for a small mystery 


Five-Minute 
Mystery 


446 — Chapter 


‘The Case of Relatives and Absolutes 


PlanetRobots, Inc. faced with the task of developing a website 

for each of its two company divisions—PlanetRobot Home and 

PlanetRobat Garden—decided to contract with two firms to get 

the work done. RadWebDesign, a seemingly experienced firm, took 

оп the Home division's website and proceeded to write the site's 

internal links using only URLs (after all, they're more complicated, 

so they must he better) A less experienced, but wellchooled 
firm, CorrectWebDesign, was tasked with PlanetRobor's Garden 
эйс, and used relative paths or links between all the pages within 
the site. 


Just as both projects neared completion, PlanetRobots called with 
an urgent message: “We've heen sued for trademark infringement, so 
we're changing our domain name to RobotsRUs. Our new web server 
GorreetWebDesign made a 
couple of small changes that took all of five minutes and was ready 
for the site's unveiling at the RobotsRUs corporate headquarters 
RadWebDesign, on the other hand, worked until 4 a.m. to fix their 
pages but luckily completed the work just in time for the unveiling 


is going to be waw, zabotarus.com. 


However, during a demo at the unveiling, the horror of horrors 
occurred: as the team leader for RadWebDesign demonstrated 

the site, he clicked om a link that resulted in а “И —Раде Not 
Round” error Displeased, the CEO of RobotsRUs suggested that 
RadWebDesign might want to consider changing their name to 
BadWebDesign and asked CorreetWebDesign if they were available 
to consult on fixing the Home site. 


What happened? How did RadWebDesign flub things 
ар so badly when all that changed was the name of 
the web server? 
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getting connected 


Web page fit and finish 


Сап you say “web career"? You've certainly delivered everything the 
tarbuzz CEO has asked for, and you've now got a high-profile website 
under your belt (and in your portfolio). 


But you're not going to stop there. You want your websites to have that 
professional “fit and finish” that makes good sites into great ones. You're 
going to sce lots of ways to give your sites that extra “polish” 

this book, bur let's start here with a way to improve your inks, 


Improving accessibility by adding a title to your links 


Wouldn't it be nice if there were a way to 


more information about the ink 


you're about to click on? This is especially important for the visually impaired 
using screen readers because they ofien don't want the entire URL spoken to 
theme (hv 


e р" 7 Salah” “lash “ы” u" "w^ “о, and yet the links 
abel usually only gives a limited description, like “Caffeine Buzz." 


The <a> clement has an attribute called 


сле just far this purpose. Some 
people are confused by this attribute name because there's ап elment named 
<title> that goesin the <head>, They have the same name because they are 
хешей а aften suggested that the value of the 

as value of the < 

in't a requi 


tle attribute be the same 


1e» element of the web page you are linking to. But that 
ment and often it makes more sense to provide your own, more 
relevant description in the rar le attribute 


Here's how you add a Lele attribute to the <a> element: 


Read the <a hrefe"http://wickedlysmart.com/buzz" 
able bes all about caffeine on the Buzz">Caffeine Buzz</a> 


1 


\ The title element hat a vale that is a terb 
description of De page You are Inking ba 


Now that we've got a «11e attribute, le's see how your visitors would make use of it. Different 
A browsers make different use of the tile, but many display a bo tip. Add the changes above to 
ExeRCi$e your index.html fle and reload the page to see how it works in your browser. 
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best practices for your links 


The title test drive... 


For most browsers, the title is displayed 


asa tool tip when you pass the mouse 
over a link. Remember that browsers 

for the visually impaired may read the 
link tille aloud toa visitor, 


The tite i displayed 
асаа tip in most 
комет. ust past 

x mouse over the 
rk and held it there 
a setond to ste the 
p 


The Head First Guide to Better Links 
He nfo they in ino ethernet fr ifa lale: e» 


+ Keep hun link label concise. Don t make ente sentences on. ie into links, 
E ecu ee 


pen ok eran, seo bi ele Le n pe Theod 
Vl bl fi nile a al Sp ml lens 
. ү) ps 
5 
E be noeh esha hl ing 
tie rh ой dining hte bait 
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getting connected 


Open your Starbuzz index hm fle and add a le to the ink omission him with the text 
p<, Read more about Starbuzz Cofee's important mission: Notice that we didn't make ће mission 
Exercise 


inks label as concise as it should be. Shorten the ink label to ‘our Mission.” Check the back of 
the chapter for the answer, and test your changes. 


Great job on the links, 
Id really like for people to link 
directly to the coffee section of 
the Buzz site, Is that possible? 


Caffeine Buzz 


Linking into a page 


So far, whenever you've linked to another page, the page loads 
and your browser displays it tom the top. 


Buc the CEO's asking you to lik into a particular spot in the page: ~ o сез 
the Coffee section. = 


Sound impossible? Come on, this is Head First—we've got the 
technology. How? Well, we haven't told you everything about the 
<a> element yet, Turns out the <a> element can team up with the 
За attribute to take you straight to a specific point în а page. 
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creating destinations 


Using the id attribute to create a destination for <a> 


We haven't talked about the 14 attribute уеп; it's an important attribute with special 
properties, and we'll get into more detail about other special properties of id later 
in the book. For now, think of it as a way of uniquely identifying an element, One 
special property that elements with 145 get is that you can link to them. Let's see 
how to use the id attribute to create a destination in a page for «25. 


0 Find the locaton in the page where you'd like to 
create a landing spot. This can be any text on the 
page, but often is just a heading. 


Choose an identifier name for the destination, like 
“coffee” or “summary” or “hio; and insert an id 


anribute into the opening tag of the element. 


Let's give it a try Say you want to provide a way to linkto the Chai "Tea item on 


the быша page er’ what oo йен Mees бе pet 

from “index html”‏ ہے 

асым! тез, isse is the Cha ead 
quA spicy drink made vith black tea, spices, milk a depen 


and honey. «fp» 


Flowing the two steps above, we get hist 
T 5 Ve important that your 


‘hdd the id te the find vell give hi id be ie That i the 
oening tag of the destination the "nhi id mast be the only 
— | identifier "thar" hai’ in the pagel 


n2 44я^евай%усһз1 тез, 91.85</n2> 


<P>A spicy drink made with black tea, spices, milk and 
Roney. </p> 


SL atot be Oa Ta 
heading in the “index html” pate 
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How to link to elements with ids 


You already know how to link to pages using ether relative links or URLS In 
either case, to link to a specifie destination in a page, just add a # on the end of 
your link, followed by the destination identifies So if you wanted to link from 
any Starbuzz Coffee web page to the “chai” destination beading, you'd write 


your <a> element link this: 


<a hrefe"index nemiiehai">ses chai Tea</a> 


Unfortunately; linking to Chai Tea isn't very impressive because the Thes 
vil page small camp that it ay iin the wer Les link дерею 


tothe Clee of атру саана comes tend, as i д 

Fact ye pg йк eram at 

un ra ic eds 
puc 


© ricos cid ofthe Colle heading 


Ө Aber the existing <a> clement in the Starbuzz Coffee 
“index hun” fle to point to the destination heading. 


Ө Reload your index” page and test eut the nk 


Finding the destination heading 


"To find the destination heading, you're going to have 
to look atthe wicked! yanart -com/buzs page and 
View their HTML. How? Almost ай browsers have a 

“View Source” option. So, visit the page and when it 


{silly lose, choose the "View Source" option, and Caffeine Buzz 


youll see the markup for the page 8 


Се 


In most мет qoe can ä ч 


Ма bo "View Soure” 
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linking to a destination 


Now that you've got your hands on their HTML... 


Scroll down ший you see the Cole section it looks like thi: J a small snippet From 


Ра the Caffeine Buzz pase 


ng problem 


This is similar to the nam 
wich <bəmateinec/b> and «>и: 
<p 


Heres the Coffee section. You tan 
sere heading frit along wth 
dhe stark of the paragraph below 


оо __ _ 
E Ам, and here 


destination мав 
Be nine "Cle 


he 
ball fluid oun ing | has 


<> 


а аке U.S. fluid cunces.e/t» 


Reworking the link in “index.html” 


Now all you nee to dni гайні Бе fink to Cafíine Buzz 
xad ack om he destinacion anchor nave le this 
The default file at 
eee bee, 
т иа ek from the Inder hinl So, well add that m 


T Bie Ae URL o ce ta the destination id 
Starbuzz "dex enl Fl Sy Be URL ы ean m [* e e 


Make this change to your Starbuzz “index him fie. 
, Reload and ick on the "Caffeine Buzz’ link. You 
EXeRCÍSe shouldbe taken directly to the Coffee section of 
Cafeine Buzz’ front page. 
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QQ: wren have two atte inan 
entis the order important? For 
Example, should the ile atribute always 
come ate he af? 


2 The order of attributes i not important 
in any alamant ft were we'd al have 
headaches 247]. S, use any ordering you 
же. 


О: now woud rete a tol ip for an 
element thats not an <a»? 


ПОТИ 
sien oyu watt po ta 
eat, you an aie ае yr 
P opaning рш йа н dû wi <р. 
Thao a tw deret апае te 
tro тою an ato be 
— oon paps. 


О: Can ada an ia atributo to му 
ismon? 


Å: ves, you oan You coud a nomo 
in opr by adang anid аал 
Sen балит, tance eta Pat 
Srl atan nand ова yo can dat 
[oe 


О: could ink to a ink by adating 
anid atributo to an <a» element in the 
estimation? 


A 


Q: 1 noticed in the ia names, you 
usag ehai" with a lowercase letters 
эла Caffeine Buzz used “Coffee” wih an 
Uppercase C" Doos К matter? 


there are no 
Dumb € Questions 


А: Yuan cian ol 

i borane Sacer 
йаман. tensa am 
Cras ara sua e ane p 
жалам йе yoi E 
КОШТОСО 
oda few owes йу borate 
sry sen d 
Sista пой coat y 
dee Te mest atn ug ann е 
itane ol cose Fa uia 
КО 


О; can tput a ink to a destination 
най within бе same document? 


+ Sure. in fact, tis common to definea 
dediraton ‘lop’ а the lop o a page (say, on 
‘he top heading of he page) and have a inik 
atthe bottom ol the page reading “Back lo 
top." Ils also common in long documents lo 
have a table of contents for he ene page. 
For instance, to Ink lo the "tog" destination 
heading in the same page, you would wre 
<a href= og» Back lo opea». 


О; иу dia ve need to мазе гн 
ийй tt вш: UR moro ets 
— кемир? Ca 
‘eave ie 

cadena combo? 


Az io savant verk because 
6 
dol fe URL wee 
Sprang пе юте You сой 
fore wl 
deen ec 
wich pu ta sane rar he 
Voce cut ang nes iT 
эй ште i hane l you otio he 
Sates ane dac 
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О: ra web page doesn't provides 
desinaonand e need to ink to a 
Spec partot he page, hou can I? 


А: ev ca. more is erat qn 
‘fer wards, no element with an), Ban you 
cant direct ne browser 1o go lo a specie 
locaton in a web page. You might ty o 
contact he page author and ask hem to add 
‘one (even better, te them howl) 


О: cant have a destination ia Ike 
“edi indie or does an have to be 
niy one word? 


Д: ot cont win ne most 
den анат sa yout uth a latar 
LAZ or a.z) and th any i 
tak yanan, deno cn, paros. 
Shit you eant use расата тава 
таа ond, lr rh 
з тшп temas You ean aye 
Pov ania майна, 
“ord” ado 


О: ow can ta others what 
destinations hey can nko? 


Д: trois ostishe uay fig 
th anain ва. eu Source amane De 
сазайы or song те 
—— апо 


О; bels use just words as the 
anent of an ч element? 


lû. The <a> element has always been 
able to create Iris hen words and mages 
(inne content} and has recently been 
Updated (а НТМ) so that you can create 
link from Боск elements, ike <p> and 
<blockquote> lool So <a> can be used to 
create inks rom al kinds ol hings: 
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case solved: it's all about relative and absolute 


The Case of Relatives and Absolutes 


So, how did RadWebDesign lb up the demo? Well 
because they used URLs for their hzefs instead of relative 
links, they had to edit and change every single link ftom 
bttp://wwu.planetrobots. comto http: / /мми. 


rabotsrua.con. Can you say error-prone? At 3:00 om. 
ала, tomcane уен and accidentally yped Fn 
-Mii / fw „тобаа ги, соп (and as fate has it, ar 


the demo), 


Caras on йе te ad dae 
Олло ton 
isc baa шай RR. Sl 
Cees had ws ae cm 


me on a few pages. 


So RadWebDesign left the demo sleep-deprived and with 
a litle egg on their face, while Correct WebDesign left the 
meeting with even more business. But the story doesn't end 
there. It turns out that RadWebDesiqn dropped by a itle 
colfechouse/bookstore after the demo and, determined not 
to be outdone, picked up a certain book on HTML and 
"What happened? Join us in à few chapters for "The 
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Awesome job linking to the Buzz site.I 
know I keep asking for changes, but really, this 
is the last one. Con you make the Buzz site come. 
up in a separate window when I click on the link? T- 

don't want the Starbuzz page to go away. 


Linking to a new window 


We have another new requirement from the 
Starbuzz CEO (there are atari new requirements 
Tor websites). What he wants is this: when you click 
on the “Caffeine Buzz" link in the Starbuzz Coflee 
page, the Starbuzz Collee page shouldn't go away 
Instead, a whole new window should open up with 
the Caffeine Buzz page in it, like this: 


When the Caffeine 
Buzz window pops FEN 
Here's the mi open oer the top 
de iul a 
Siri Cole i Abe Starbuzz pate 
but the Starbuzz Page 
lal be ere 


Caffeine Buzz 


What the CEO 

мән а whole — 
new Window to acon 
Fen when yau click 
on the Caffeine 
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{targeting windows and tabs 


Opening a new window using target 


"To open а page in а new window, you need to tell the browser the name of the window in 
which to open it, IF you don't tell the browser a specific window to use, the browser just opens 
the page inthe same window: You can tell the browser o use а diferent window by adding а 

target attribute to the vent. The value of the target attribute tells the browses the 
‘target window" for the page. If you use ^ blank" for the target, the browser will айна open a 
new window to display the page. Let's take a closer look 


a> de 


<a target="_blank" href="http: //wickedlysmart.com/buzz" 
Д title="Read all about caffeine on the Buzz">Caffeine Buzz</a> 


Cr target stint Ы he ener her 
Aopen the ch page that kt nk n 


h there are no. 
bule. If there и no target, jons 
onser quis the Ink in the ше Denni Questions 
window IF Ehe target i Bank” they Be 
ier орем the nk in 2 rew window Q rm getting a new tab instead ofa naw window, 
‘Av doing someting wrong? 


А: rat eta oh adt 
rut leer rere 
e dae ширк een eos 
ar be er eee 
жынс yr рин имин Гуш 


Open your Starbuzz ‘index. vant lo foros а whole пан indo, поз browser have 
р himî fie Add the corset a ay to do ba rough he preferences seage, 
Excercise atribute io he <a> tag that б 
links to the Caffeine Buzz О: wnat iti have mre than one <> element with 
pago. Now give ita try id target tors already a” blank” new window 
you get a new window? pen, wil it open in the window thats already open? 


Or wil it open in a new "blank" window? 


you gie he same " bank to the agen 
all your <a> elements, then each nk will ogen ina 
new ark window. However t s а good queston 
because ings up an important point: you dont 


actually have to name your target" Ban you ge 
"tanolhr name, say, "afe hen al inks wih he 
Can you think of some advantages and target name ‘ccs’ wil open in he same window. The 
some disadvantages to using the target reason is that whan you give youe argel a specie 
attribute to open a page in a new window? тата, hoof’, you aro really naming tha new 


‘window that wil be used to display he page at he ink 
“bank is a special casa that ll the browser to lays 
use a new window. 
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The Target Attribute Exposed 


This week's intervi 


Using target considered bad? 


Head First: Hello, Target! We're so glad you could 
join us. 


Target: I'm glad to be here Its nice to know you're 
stil interested in hearing about me 


Head First: Why do you say that? 


Target: Well, to be honest, I'm not as popular as L 
used ta be. 


Head First: Why do you think that is? 


Target: 1 think irs because users want to bein 
contro of when a window opens. They don't always 
like new windows popping open at unexpected times. 


Head First: Well, it can be very confising—we've 
had complaints from people who end up with so 
many windows on their sereens, they cant find the 
original page 

Target: But its not like its difficult to get rid of the 
windows. jus lick on the litle close button. What's 
so hard about that?! 


Head First: Truc, but if users don't know а new 
window has opened, then they can get confused. 

Sometimes the new window completely covers the. 
‘ld window and i's hard to tell what's happening 


Target: Well, browsers are geting better at this kind. 
of thing 


Head First: How so? 


Target: Browsers ofien open external pages in a 
new tab, within the same browser window, rather 
than opening them in a brand-new window. 


Head First: Ah, yes, that would help because it 
чай be a lot less confusing to see a new tab open, 
which the user can visit whenever they wam, Unlike 
‘opening a new window, it i't so disorienting. 


Head First: How does this help with sereen readers 
though? 


Target: You mean browsers used by the visually 
impaired? 

Head First: Right. Some sereen readers play а 
sound when a new window opens, but others just 
ignore the new window completely, or else they jump 
right to the new window immediately: Either way it's 
gotta be confusing for someone who can't see what's 
going on. I have no idea how they are handling tabs. 


Target: [Sigh] Yeah, we just aren't there yet in 
terms of providing good tools that meet everyone's 
needs, especially the visually impaired, That said, we 
seem to need to have the ability to take the user to 
pages outside our own site, and many sites do that 
by opening another window (or tab, if dhe browser 
supports it. 


Head First: Yup. We need you, but we need to get 

better about not confusing the user. 

Target: I'm hoping the web standard and browser 
ams will make all this better, 

Head First: 1 guess for now we're jus gong to have 

to remember to use you when its appropriate, but 

to keep in mind those people who might be visually 

impaired and not overuse you. 


Target: You got it. You've helped ease my burden a 
bit here; thanks for helping me get the word out! 


Head First: Any cime, Target! 
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a brain crossover 


9958 HTML kne И 


Across Down 

1. Web address to a resource. 2. Top directory of your website. 

З A Mac FTP application. A Requestitesponse protocol. 

T. Unique name on the Web. 5. Keep your link labels х 

8. The fle you get when you ask for a directory. 6. Attribute used to make an element into a 

10. What are you supposed to send back from destination 

Webvile? 9. Earl sold these. 

12. Top directory of your website. 11. Always use these kinds of links when linking to 


15 Protocol we've been using up until this chapter. pages on the same server. 
16. People can scan these rather than reading text 14. Wrong way to pronounce URL. 
17. Path from the root. is Informative caffeine site. 

18. Controls domain names. 

18. The fle you get when you ask for a directory. 
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® BULLET POINTS 


Typicaly the best way to get on the Web is 
to find a hosting company lo host your web 
pages. 

= Adomain name i a unique name, ike 
‘amazon.com or staruzzcoffe com, that is 
used to identity a site. 


= Ahosting company can create one or more 
web servers in your domain. Servers are 
oen named "war. 


= The File Transfer Protocol (FTP) is a 
соттоп means of transferring your web 
pages and content to a server. 


= FTP application, Ike Fetch for Mac or 
WS. РТР for Windows, can make using 
FTP easier by providing а graphical user 
interface. 


= AURL is a Uniform Resource Locator, or 
web address, that can be used to identify 
any resource on the Web. 


= Atypical URL consists of a protocol, a 
website name, and an absolute path to the 


= HTTP is a request and response protocol 
used to transfer web pages between a web 
Server and your browser. 


^ The fle protocol is used by the browser to 
read pages from your computer. 


‘= An absolute path isthe path from he root 
folder to a fle. 


^ "index himi and “default him are 
examples of default pages. If you specify 
a directory without а flename, the web 
Server wil look for a default page to retum 
to the browser, 


You can use relative paths or URLs in 
your <a> element’ href attribute to link lo 
‘other web pages For other pages in your 
ste, їз best to use relative paths, and use 


URLs for external inks. 


Use the id attribute to create a destination 
in a page. Use followed by a destination 


id to fink to hat location in a page. 


To help acoessibilty, use the tile attrbute 
lo provide a description of he ink in <a> 


elements. 


Use the target attribute to open a link in 
another browser window, Dont forget hat 
е target attribute can be problematic 

for users on a variety of devices and 


atemative browsers. 


go, we need our logo on 


to Chapter 5. 


Wait, ной! Before you 


the web pagel Hello? Oh, I 
guess they ve already gone on 


getting 


150 


il 
hours 


‘You've waited long enough. Its time to give your new URL a spin. 
Before you do, fil in the blanks below and then type in the URL 
(ike you havent already). If you're having any problems, this В the 
time to work with your hosting company to get things sorted out I 
you haven't set up an hosting company, fill in the blanks for www. 
Starbuzzcoffee com, and type the URL into your browser anyway. 
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Earl needs a little help with his URLs 


you aro hes. — 161 
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| маа tile to the link to ‘mission him” with he text "Read more about Starbuzz Coffee's 
important mission." Notice that we didn't make the mission rs label as concise as it shoul e 
neige Shorten the ink label to "our Mission’. Here's the solution; did you test your changes? 


Lution 


pe 
<head> 
bless coffee</titie> 
<style typen"text/cse"> 
background-color: 4dzbas 
margin-left: 208; 
margin-right: 20i; 
padding: 10px 10px 10px 10px? 
чеч» 
</head> 
<body> 
<ħ1>starbuzz Coffee neverages</hi> 
@aiouse Blend, $1,49</h2> 
SpA smooth, mila blend of mexico, 
Bolivia and Guatemala.4/p» 
‹ззэмәсва Cafe Latte, $2.35</hz> 
<p>ispresso, steamed milk and chocolate ayrup.</p> 
@arcappuccine, bach, 
рл mixture of espresso, steamed milk and foam.</p> 
n Michal тез, esche, 
Mà a tite 
bn Ds spicy drink made with black tea, spices 
Euri "ilk and honey. 
mission ba 


. 


. 


titlen"Read all about caffeine on the Buzz">caffeine suzz</a>. 


</p> 
</body> 


5 adding images {о your pages 
.* 
x Meeting the Media 


Smile and say "cheese." Actually, smile and say "gif," "jpg," or 
“png”—these are going to be your choices when “developing pictures" for the Web. In this 
chapter you're going to learn ай about adding your first media type to your pages: images. 

Got some digital photos you need to get online? No problem. Got a logo you need to gat on 
your page? Got it covered. But before we get into ай that, don't you stili need to be formally 
introduced to he <img> element? So sorry, we weren't being rude; we just never saw the 

“right opening." То make up for it, here's an entira chapter devoted to <img>. By the end of 

the chapter you're going to know all the ins and outs of how to use the <img> element and its 
attributes. You're also going to see exactly how this litle element causes the browser to do extra 
work to retrieve and display your images. 


this is anew chapter 163 


w l. ebooks info 


images in your hin! 


How the browser works with images 


Browsers handle <img> elements а litle differently than other elements. 
‘Take an element like an <h1> or a «p». When the browser sees these 
tag in a page, allit needs to do is display them. Pretty simple. But when 
а browser sees an cina? element, something very different happens: the 
browser has to retrieve the image before it can be displayed in a page. 


The best way to understand this sto Look at an example. Let's take a 
quick look back at the elixirs page from the Head First Lounge, which 
Jas four «ing» elements: 


— 
<head> 
<title>iiead First Lounge Elixireeftitle» 
</head> 
<body> 
sou здары» 
ha>Green Tea Coclerc/h2> 
E 
<img sre" ../inagea/green. jpg"> 
Chock full of vitamins and minerals, this elixir combines 
the healthful benefits of green tea with a twist of chamomile 
blossoas and ginger root 
</p> 
Raspberry Ice Concentration</h2> 


<> 
img аге". /images/lightblue. jpg» qe 
Combining raspberry juice with lemon grass, citrus peel and 


rosehips, thia icy drink will make your mind feel clam 


crisp. die HTML 
ч» 
<h2>nlueberry Blisa Elixir</h2> 


<> 
<img агент. /images/blue. jpg» 
Blueberries and cherry essence mixed into a ba: 
elderfiawer herb tea will put you in a relaxed state of 
bliss in no time. 
</p> 
«м2>сгапвегту Antioxidant Blast</n2> 
<> 
<img szos". ./images/zed.jpg"> 
Жаке up ro the flavors of cranberry and hibi. 
this vitamin C rich elixir 
</p> 
<> 
<a href". /lounge.html">sack to the Loungee/a» 
</p> 
</body> 
«pni 
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adding images to your pages 


Now let's take a look behind the scenes and step through how the 
browser retrieves and displays this page when it is requested from 


metan //utchedlysnart. говите Behind 
O First, the browser retrieves the file "elixir htn" from the sever. the Scenes 


pty browser window nothing retrieved yet 


Browser 


O Next the browser reads the "eliirhtmi" file, displays it, and sees it 
has four images to retrieve. So, it needs to get each one from the web 
server, starting with "green jpg". 


The HTML page is vekrieved, but the browser 
still needs to get the images 
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© 


Having just retrieved "green jpg", the browser displays it and then 
moves on to the next image: "lightblue jpg". 


Са 


Dern 


y — 
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Now the browser has retrieved "lightblue. jpg’, so it displays that 
image and then moves on to the next image, "blue. jpg". This process 
continues for each image in the page. 


Chapter 5 
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How images work 

Image are jut images, igh? Wal acl there ar а tion formats 
tee tere nthe word, эй ih Deleon rache and wee 
Bucci ойу ne of those rts те cemmonl тей on te We 


E 


G, PNG, and GIE The only tricky part is deciding which to use when. 


So, what are the differences among JPEG, PNG, and GIF? 


Use JPEG for photos and Use PNG or GIF for images with solid 


complex graphies colors, logos, and geometric shapes. 
Works best for continuous PNG works best for images with a Like PNG, GIF works best 
tone images, like few solid colors, and images with for mages with a few solid 
photographs lines, lke logos, lip ап, and small colors, and images with 
Can represent images with 'eMinimages A 
up to 16 milion different PNG can represent images with 
colors milions of different colors. PNG GIF can represent images 
1 comes in three flavors: PNG-8, with up to 256 diferent 

Is a “ossy” format 
N РМб-24, and PNG-32, depending colors. 

оп how many colors you need to 


GIF is also a "lossless" 
format. 


size, it throws away some 
information about the 
image. PNG compresses the file to reduce 
its size, but doesn't throw anything 
way. So, it is а "lossless" format. 


represent 


GIF also supports 
transparency, but allows 
опу one color to be set to 
Allows colors to be set lo “transparent” 

“transparent” so that anything Files tend to be larger than 
underneath the image will show [riri anh 
through 
Files tend to be larger than their 
JPEG equivalents, but can be 
Smaller or larger than GIF depending 
on the number of colors used 


Does not support 
transparency. 

Files are smaller for more 
efficient web pages. 


No support for animation. 
‘Supports animation, 
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differences between sif, jp, and pna 


Would the real image format please stand up? 


This week's interview: Image formats mix it up 


Head First: Well, hello everyone. I think this might be 
the first time we ve interviewed three interviewees at once! 
JPEG: Hey there, and hey to GIF and PNG. 


GIF: Гл not sure why I have to share the interview 
couch with these other bozos, Everyone knows GIF isthe 
original image format of the Web, 


JPEG: Ha! As soon as you get good at representing 
complex images, like photos, maybe then people will take 
you seriously again, but Ten not sure how you're going to 
do that with only 256 colors 


Head First: PNG, help us out here? You've been kind of 
quiet so ar. 

PNG: Yeah, its easy to be quiet when you're #1. I can 
represent complex images like JPEG and I'm also lossless 
like GIF Truly the best of both worlds. 

Head First: Lossless 

PNG: Right; when you store ап image in a lossless 
format, you don't lose any of the information, or detail, in 
the image, 


ei 


de too! Tm lossless too, you know. 


Head First: Well, why would anyone want а lossy 
format? 


JPEG: 1 
want is a fairly small file you can download fast, but that 


has great quality. We don't always need perfect quality: 
People are very happy with JPEG images, 


[here's always a tradeofl Sometimes what you 


PNG: Sure, sure, but have you ever looked at lines, Jogos, 
small text, solid colors? They don't ook sa great with 
JPEG. 

Head First: Wait a sec, JPEG raises an interesting issue. 
So GIF and PNG, are your file sizes large? 


PNG: ГЇ adimit my file sizes can be on the large size 
sometimes, but I provide three formats so you can right- 
size your images: PNG-8, PNG-24, and РХС-32. 


468 Chapters 


GIF: Sounds like complexity to me- 
users to remember. 


PNG: Well, GIF, wouldn't the world be nice if we could 
fi all images into 256 colors? But we can't 


more things for your 


GIF: Hey for line drawings, figures, that kind of thing, it's 
often very easy to fit images into f bits, and for that T look 
grean, 

JPEG: Ha, when is the last time you saw a photo stored 
in GIF? People have figured out your downsides, GIE 
GIF: Did 1 mention 1 can be transparent? You can take 
рап» of me, and anything behind me shows right through- 
PNG: You can't compete with me on that one, GIE Lean. 
set any number of colors to transparent; you are limited to 
one color. 

GIF: One color ar many, who cares? One is all you need. 


PNG: Not if you want to have anti-aliased transparent 
arcas in your image! 


e 


: Hub 


PNG: Yeah, you know; because L allow more than one 
color to he transparent, so you can have nice soft edges 
around the transparent areas. 

Head First: That sounds like а nice feature. Can you do 
that, JPEG? 


JPEG: No, but I'm not too worried about it; there aren't 
many photos you'd want todo that to. That’ for logos. 


PNG: Hmmm, I'm seeing my transparency used all over 
the Web. 


Head First: Wel, I have to think twice before doing a. 
three-person interview again, but it sounds to me like GIF 
and PNG, you're great for logos and text images; JPEG, 
you're great for photos, and PNG, you come in handy if 
we want transparency as well as lots of colors, Bye! 


PNG, JPEG, GIF: Wait, no, hold oat? 
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* 


$ * 


* 
WHICH IMAGE FORMAT? 
e 


Congratulations: you've been elected "Grand Image Format Chooser of the day. For 
each image below, choose the format that would best represent it for ће Web. 


JPEG or PNG or GIF 


U 


өэ a о о 
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introducing the <img> el 


Uh, I don't mean to be 
rude, but we're on the eighth 
page of the IMAGES chapter and 
you STILL haven't introduced mel 
JPEG, PNG, GIF, blah, blah, blah. 
could you get on with it? 


<img> 


And now for the formal introductio 
the <img> element. 


meet 


We've held olf on the introductions long enough. As you can ses, 
there's more to dealing with images than just the HTML markup. 
Anyway; enough of that for now... time to meet the <Lmg: 
clement. 


Let's start by taking а loser look at the element (although you've 
probably already picked up on most of how <img> works by now: 


The <img> element it an inline 
element. | does 

етеді te be inter 
or after it 


{ е, 


<img src="images/drinks.gif"> 


) S 


The sre attribute specifies the lotation You already know 


Here's the <img> element 


be 


Soy is that it? Not quie. There аге a couple of attributes you'll 
wanî to know about, And of course you'll also want to know how 
to we the <img> element to reference images on the Web that 
aren't on your own site, But really, you already know the basics of 
msing the <img> element. 


Let's work through a few of the finer points of using the <img> 
clement, and then put all this knowledge to work. 
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<img»: it’s not just relative links anymore 


The 


attribute can be used for more than jus relative links; you can also put a URL in 
tribute. Images are stored on web servers right alongside HTML pages, so every 
image оп the Web has йз own URL, jus like web pages do, 


You'll generally want to use a URL for an image if you're pointing to an image at a бини 
website (remember, for links and images оп the same sîte, irs better to use relative paths) 


Here's how you link to an image using a URL: 


<img src-"http://www.starburzcoffee.com/images/corporate/ceo.jpg"» 


The URL it the path to the image 


Ta include an image using its URL, 
ek put the whole URL of the 
wage in the sre attribute: 


o the Filename at the erd is ар N 
the filename of an mage Theres 
те cath thing as ә default mage Ше 
there is for web pager 


ds греп your pencil 
Hera Sharpen pour penci'tha actualy about pens [ch and images toc This cia 


involves а bit of trivia: Given a typical, brand-new pencil f you drew one continuous line with it, 
using the entire pencil up, how long would the line be? 


Whats that got to do with images? To find the answer, youre going to have to write some HTML, 
The answer to this trivia îs contained in the image thats at the URL http/wickedlysmartcom/ 
hfhtmlcss/trivîa/pencil png. Your job is to add an image to this HTML and retrieve the answer: 


pe 
head» 

pu 
</head> 
<body> 

<p>iiow long a line 


a</titie> 


n you draw with the typical penci17</p> 


E 
<— 
i! кє 
ч» N Pat your image element 
</body> 
«ntn» 
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questions about images 


there are no 
Dumb € Questions 


О: so me amp sementisqute Buckie he example ta webpage Û vat matas a PEG photo beer 
simple уш юйде зау! speciy loading ure емізер thar a GIF or PNG photo ror PNG 
thelocaton ба mage ta needs tobo рар бо ste the images loading one loge ete than a JPEG lage? 
displayed in the page? ater e cec Why 


Д: etary dotnet as some 
1 Ves, падол ame tu. Wean Û: Browsers oton tee te images Freren mage qatiy ads 


abouta couple сайде оц сап ава о concurenty. That is, the browser makes A JPEG phot wil usualy be much smaller 
the element. Latar, youll see a number of requests for muliple images at he same than an equivalent-qualty PNG or GIF, while 
ways o use CSS to change the visual siye tme. Given te speed of computers and a PNG or GIF logo wll usualy look better, 
ofan image. networks, tis al happens fastenoughthat and may have a smaller fle sz Ban in 


you usualy see a page display along wilh its JPEG format. 


Buk hersa loli knot sat m 
thane hae те lero nage How do choose between GIF and 
formats far? When shoud | use one over he С): и вее an image ona web page, PNG? k seems ike they are very similar. 
‘other? How big should they be? How do | ‘how do | determine its URL so that | can 

рав nage Gr n abra, шу 


NG is he latest newcomer in graphic 
G А formas, and an interesting one because it 
L We've leamed that void elements. Most browsers alow you to ight-ck can support both photos as well as logos. 

эге elements without content or a closing on an image. which brings upa contextual alo has more advanced transparency 


tag. We've also learned that the <img> menu wih some choices. In hese choices, Маше han GIF. PNG is supported by all 
laments void. But dosn't it have 


sho se Cop nape eso rover ron, wh wt има 
Sorten he image)? Expy nage Un whch раво а fon years ap, i 
URC in your ciptoard Arter vay od 

Wot tobe move preci ayo — nd choose Open Tose between GIF and PNG, heve 
clan! san denen hat oer have ary image in New Window: wich wilco” area ире conser ent PNG 
Saen in he НТ page ора нн opening the mage ln asa window Then you Ваз sighiy baler compression an GIF, 
жаш is wound Tus rige can get he URL ee nage tone san nage wih sane nba cf 
. rowers address bar Alas ton fo stor aw 1o 286) your PNG le may 
... . ен Source manu opion bench yeu eed mor cs hen 


page вої Instead, the тае replaces the and look through he HTML. Keepin mind, GIF can ofr, and JPEG isn an option (lor 
<img> element when the brouser displays though you might find area Ink tothe ^ insano you need transparency), PNG is 


the page. And remember, HTML pages image, so youîlhave lo "Yaconstuct b defintely the way lo go. However, If you 
эе purely text, so he mage could never URL using the websila domain name and tne need aimaton, tan you shouid go wth GIF 
be бесу arto he page Ез alwaysa path ol he image. because GIF is he опу widely supported 
separato thing. format hat supports animation, 
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Always provide an alternative 


One thing you can he sure of on the Web is that you never know exactly which 
browsers and devices will be used to view your pages. Visitors are likely to show 
up with mobile devices, sereen readers for the visually impaired, browsers that are 
running over very slow Internet connections (and may retrieve only the text, not 
the images, of а se) cell phones, Internet-enabled T-shirts... Who knows? 


But in the middle of all this uncertainty, jou сан Je prepared Eve 
display the images on your page, the 


if a browser can't 


cis ап alternative. Yon can give the visitor 
some indication of what information isin the image using the «ing» element's 
alt attribute. Here's how it work 


<img src="http: //wickedlysmart .com/hfhtmlcss/trivia/pencil.png" 
alt="The typical new pencil can draw a line 35 miles long."» 


The alt attribute requires a bit of \ tents мей y de place Ёз like iF you 
EN fcnbit Ve ate меге reading the web page over the Phone 


fo someone, the alt kext а what yo d say 


in plaze of the mage 


In his exercise you re going to see how your browser handles the ай atyibute when you have 
b airoken image. The theory goes tat ifan mage can't be found, the alt atvibute is displayed 
Ехейсї е instead. But not al browsers implement this, зо your results may vary. Here's what you need to do: 


Ө Tike your HTML from the previous exercise. 


Ө Update the image element to include the a1 attribute 
"Tho typical new pencil can draw a ino 35 miles long. 


Change the image name of 'penciLong to “broken. png’. This 
Image doesn't actually exist. зо youl get a broken image. 


Ө Reload the page in your browser. 


E O 
eee, an 
shy Fete 


For instance, you to 

tk / мыт mozilla ora) or Opera 

Look at the end of the chapter to see our results... f ta) 
http//www aera tom 
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<img> element ati: 


Sizing up your images 


‘There's one last attribute of the <img> element you should know about- 
actually they're а pair of attributes: width and height. You can use these 
attributes to tell the browser, up front, the size of an image in your page. 


Here's how you use width and height: 


<img sro="images/drinks.gif" width="48" height="100"> 


^N 


The width attribute tells the The height attribute 

browser how wide the image ells the browser how 

should appear in the page alle image shold 
appear in the page 


Both width and height are specified using the number of pixels, If 
you're not familiar with pixels, we'll go into what they are in a little 
тоге detail later in this chapter You can add width and height 
attributes to any image: И you don't, the browser will automatically 
determine the size of the image before displaying it in the page. 


dereen 
Dumb Questions 
Q: TF 
) Why коша ever use these We've said many times that we 
1 ® hen hey need bo cyano epost usa HTML frc, 
anyway? پر م ودرو پا‎ eee and not for presentation. These feel like 


РЫН 

WERE — e 
width and height їп your HTML, then the. 8 TM 
CCC 
eer eee, ир? Са иса ene, read Latet foe i 
. eee 
porca ors A ннерни 
— Û Yeu can bata gorg ogolo шады тшшш бав 
‘to display the page. The browser can't know һе trouble to tall the browser one dimension, — ifs probably better to consider using CSS to 
the size of the images before It downloads ‘supplying the ; risit 18 about the ^ achieve the same result. 

d o be gained by supplying just a width or a 

ee, 
that are larger or smaller than he вов of ha Particular width o hight) 
Eis uem rises 


presentation attributes, Am | wrong? 


depends on how you are using these 
atibus. I youve seting the image with 
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Creating the ultimate fan site: myPod 


iPod owners love their iPods, and they take them. 
everywhere, Imagine creating а new sie called “myPod” 
to display pictures of your fiends and their iPads fram 


the ror gelek, ——..__ | 


What do you need to get started? Just some knowles 
of HTML, some images, and а love for your iPod, 


We've already written some of the HTML for this site, 
but we haven't added the images yet—tha's where you. 
come in. But before you get to the images, lets get things 
set up; look for the "chapter" folder in the sample 
source for the book. There you'll find a folder named 
чпурой". Open the “mypod” folder, and here's what 
youll see inside: 


adding images to your pages 


RLA iPhones are fne ton! 


My Pod in Seattle! You tan se 
‘the Spate Needle You tar see 
the 028 coffee shops. 


ec Find this in the 


chapter Felder 


Weve already written some 

of the HTML For the 

fed ste Youll find it 
"decre File 


Here's the Fs Pad 
TED omen of Seattle 


П 
"E 
= 


Were gaing to we the abe: yl find a te 


Be images for безне 
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eof other folders 
ote Folder to hold ee too, but wet bee For row 
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afan site lor ipods 


Check out myPod’s “index.html” file 


Open up the Ше “index ht", and you'll sce work has already 
begun on myPod, Here's the HTML so far: 


<html> We threw in some Reavy Bake (88 here 
pes 2 Shak бү hein for rew A dons ae 
po Же тур ә light green background. Wel be 
<style type="text/css"> geting bo CSS i a Few chapters promise! 


Body { background-color: #eaf3da;} 
чак» 
<mana> 
soar. VON Tis HTML odd ook familiar, at were wing 
RR the basie building blocks <hi», kl», and <p> 
> 
Welcome to the place to show off your iPod, wherever you might be 


Wanna Join the fun? ALL you need is any iPod from the early classic 
iPod to the latest iPod Nano, the smallest iPod shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on туро. So, what 
are you waiting for? 

</p> 


p 
p 
Me and ny iPod in Seattle! You can see the 
Space Needle, You can't aee the 628 coffee 
</p> 


«љоду» 
</ul> 


‘And here's how ik lost 
in the browser: Not bad, 
but we need image 
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r 


[As you can see, a lot ofthe HTML is already written to 
get myPod up and running, All you need to do is add 
an <img> element for each photo you want to include. 
There's one photo sofa “seattle video jpg so go. 
ahead and add an element to place that image in the 
Page below. When you've finished, load the page in 
your browser and check out the view of Seattle. 


body ( background-color: #eaf3da:) 


</style> 
</head> 
<body> 
<hielcanê to nyrode/h1> 
<p> 
Welcome to the place to show off your im 
Wanna join the fun? All you need ia any 


iPod ta the latest iPod Nano, the amall 


а Video, and a digital camara. 


Just take a snapshot of your 1Pod in 


| | image right here | 


This is where you need to 
place the First photo 


ad, wherever you might be 
ipod from, the early classic 
ipod Shuffle to the largest 


E 
€——À 
> 
E 
[usn үш <img> dement i 
eas int hee 

</p> 

љоду» 

«лка 
ةير‎ r 
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the image is too big 


Whoa! The image is way too large 


Well, the image is ight there where it should be, bur that is one 
lange image. Then again, most of the images that come from digital 
cameras these days are that large (or larger). Should we just leave 
the image йе it is and let visitors use the scroll bar? You're going to 
see there are а couple of reasons why thats a bad idea. 


Let's take а lock atthe image and the browser and see just how bad 
this station i 


Here's cur eser [t's about. the 


r — 


window а about 
800 pel wide 


We could use the муы | 
bars to see the vert of | 
the image, but мыд}. | 
it be better if we could | 


tthe image 
fits rely in 


your browser 
Watch it! наон then 
Joie browar 
may have an “auto mage 
теве" opion tumed on 
Моол ee 


Ped her's De "ne go image 
added te дем" н nnm 


Here’ the full size of the image, 
heh а bigger than the size oF the 


browser window math bi 


| Fi ths mage into the 
browser window? 


The image в 1200 piek vide 
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there are no 
mb ¢ Questions 


Dum! 


О: Wata wang wih having the usar just usa tho serali bar 
to sie the image? 


— uth erga togas are hard to use ot 
пй} can ila na a та rit gern d ae uang 
scaricare. Lag mage эво eue more daa o 
. 
It ard nay el yr рар berg very sow ерау 
Paty ler users on — 


О why can't just use he width and height андык to 
resize he mags on the page? 


7 Because the browser sil has to retrieve the entire large image 
before it scales it down to ft your page. 


О: You said the browser window is 80 pixels wide; what 
«айу doss that mean? 


А: Yar amps gy итв up fe o tis atea 
ii yk ашу а уш ispa a a 


Here's a lot 
of pels that 
Together make op 
the upper part of 
the right wing of 
the butterfly. 


Here's one gl 


— 
Ths image i made wp 
of bee. of pixele 
when ts deployed on a 
ерде ert 


adding images to your pa 


And while sereen sizes ard tesollons tend to vary (some people 
have smal monitors, some large), most people удса set ther 
browsers to somewhere between 800 and 1280 pixels wie. So, 
around 800 pines is a good rule of hum for the maximum width ol 
Your Images (and your wab pages too, but wel get io that in a later 
chapten). 


О); How do the number of pixels relate to the size of t 
lagen th seen? 


Jy pga nti pa ea aah wh 
ук ий reisten at il dine can jo hh 
Wo usea i наи Торна pt nh pb hard 
malen iy be crc ola CSS pal taste ceed The 
CSS рош 1 olan oh (pp So era 3 wda «Эй тад 
ye pa (ncs 280x208 pi 


CQ wel, how large shou make my images then? 


2 in general. you want o keep the width of your image o less 
"nan 800 pes do. Of course, you may want your images lo be 
sigicanl smaller (or somewhat larger) depending on what you r 
using бе image for. What i the image is a logo for your page? You 
probably кап hat small but stl readable. Aller al. you don't need 
logo the width af tha entire web page, Logos lend to run between 
100 and 200 pixels wide. So, айн). he answer to your question 
depends on he design ot your page. For aholas—which you usualy 
do want lo vlew as large as possi ou тау want lo have a page 
‘of smali thumbnail images that load quick. and then alow Ве user 
lo click on each thumbnail to see a largar version of he mage. Well 
get lo al that shorty. 


(O инок my browser automatically resized the image of 
Seale because fs porlecty in the window. Why did my 
— 


2 Some browsers have a feature that resizes any mage that 
ase within the wth of your browser. But many browsers don 
^o his, so you dont want to rely on t Even I every browser did have 
this feature, you'd stl be transferring a lo more data than necessary 
between the server and browser, which would make your page sow 
до oad and less usable. And keep п mind hat an increasing number 
ч people are viewing web pages on mobile devices, and large 
images wil iac! data usage on thes devices 
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making your images the correct size 


Resize the image to fit in the browser 


Let's fix up this image so И fits the browser page better; Right now this image 
3s 1,200 pixels wide by 800 pixels tall you'll see how to determine that in а se) 
Because we want the widih of the image to be less than 800 pixels, we need to 
decide on a width that would fit our myPod web page nicely. The whole point 
fof myPod is viewing photos of iPods in their surroundings, so we probably 
want to have reasonably large images. If we reduce this image size by one-half 
чо 600 pixels wide by 400 pixels high, chat will still take up most of the browser 
width, while sil allowing for a little space on the sides, Sound good? Lets get 
this image resized. 


Я 
a 1200 ee 


We need to veize the 
‘mage so that te sbil 
reasonably large, bot 

is less than 800 ple 
wide bOO seems like a 
nice width that happens 
to be one-half the 
Curent tine 


Here's what you're going to do: 


Ө Open the image using a photo editing application. 


Ө Reduce the image size by one-half (to 600 pixels by 400 pixe 


Ө Save the imago as “seattle video med.jpg”. 
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IF yos don't have Adobe 


Yd lie ds foo 


n 
30 dap 
Eos 


along 


Yor tan deen 
The URL te de, 


е" 


Before we get started, 

which photo editing application 
are we going to use fo resize 

‘he mage? £ have Photoshop 
Elements, Wil that work? 


боой question—there are lots of photo editing 
applications on the market (some freely available), 
which are ай quite similar. We're going to use 
Adobe's Photoshop Elements to resize the images, 
because it is one of the most popular photo 
editing applications, and is available on both 
Windows and the Macintosh. If you own another 
photo editing application, you should have no 
problem follawing along and translating each 
editing task to your own application 


M you don't yet have a photo editing application, 


Агана — 
Lee e aa a 
ee e e es 
soc Winds umi a dne. 
Leder e 
so donne a eng apes se 
(C be HME ad es included ia he nape 
Ea 


Рыа, 

р Elements, but 
for the vest of the chapter 
ib and toy i ont free Foe 
А), 

P elementa О 
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using a photo editor 


Open the image 


Firs, start your photo editing application and open the "scatle video. 
jpg” image. In Photoshop Elements, you'll want to choose the "Open. 
‘menu option under the File menu, which will open the Open dialog box, 


You're going to use this to navigate to the image "scade video ра” in the 
‘chapters/mypatl/ phot" folder, 
Heres the Open dialog bet Ac you падае trogh folders, youl see a 
Use th dialog te navigate to review of he images In those folders here. 


die eattle ideo yd mage 


When you've lotated the 
чөн video e mage 
Па Open to open it 
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Resizing the image 


Now that eule video jpg? is open, we're going to use the "Save for Web" 
dialog to both resize the image and sav it. To get to that dialog box, just 
choose the “Save for Web" menu option from the File menu. 


se be cattle меу To vesine the mae, choot "Save 
Чоң, in Photaihop Element for Web" From the File mene 
ИИ ЕЕ - 


= : \ 
E E \ 
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resizing an image 


Resizing the image, continued... 


Aller you've selected the “Save for Web" menu option, you should see the 
dialog box below; let's get acquainted with i before we use it. 


Here's where you choose the format, 
ты a e do al nd of notin Sg Fo she yor Ui e c e 
vow, waive going te fatus on how to te ib {ө теше and sane аз GIF; мете going to change this to 
oe n PEA Format for чё page JPEG va tede of pages 


[E asime 
E 
Тв fH window sh ү» Jor erga image on e ЕЙ, and te nage 
in the format qve sng tt for the Web onthe wight Corn the a 
Showing GIF bs wel N 


‘hanging this to JPEG no, upcoming step 
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adding images to your pages 


As you can see, there's а lot of functionality bui into this 
dialog Lets put it to good use To resize the image, you 
need to change the width to 600 pixels and the height 
ко 400 pixels. Then you need to save the image in JPEG 
format, Lets мап with the resize. 0% Change the image size here 
to a width of 600 and a height 
of +00 IF yos have Costra 
Proportions checked, then all you 
have do do is ype the new width, 
400, and Elements will change the 
height to 400 for You 


(D Once the width and 
eight are set correct 
lick Apply te let 
Elements brow баа 
фе size you vin 


This wil ot affect the orignal mage, J 


jest the File you're going to save 


ү» must elek Apply to тейме the mage size; otherwise, 
he image wl Oa SE orignal lh ad he 
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using save for web 


You've resized—now save 


Now you just need to save the image in the correct format 
PEG), To do that, you need to choose JPEG format and set 
the quality to Medium. Well talk more about quality in a see. 


(0 Now bet the image size is sets 
sk need ta choose the Format 


ү lhe ase. Currently Ёз set to 
ES КАА pul te JPEG (2) Sek the quality to Medium. 


like weve done here j 


0% Dat i 
аа OF эд 
ap to the nert 
Tage 


i 


EE ES Co — 
e EE | COFFEE 


Notice that when you clicked Ату 
in he previous step, the image wat 
тезге and vedisplayed. 
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Save the image 


Afier you click OK, yo 


get a Save dialog Save the image as 


scatle video. med jpg” so you don't overwrite the original photo 


Save As 
Where: [Ci photos Е] 
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Charge the filename ta elbe video med pg 


Notite that you're Chasing the filename Fram “settle video” 
to "este rideo. med fe Why? People ual like to zov thee 
‘rig, bps weft), big photos for printing, and put smaller 


Wen onthe Web Fou saved фы ж Neste dex iy 
ord be losing the original photo! жайыш 


О: Can you say more atout the йу 
sating in "ave for Web"? 


Д: me ıa tomat aons you to ену 
— naoa. Te 
Tower o quay Бе тай e i se и 
lokal he pee pane in a Sae 
To t бар ou cante he uty 
жа боша clang as уол cue те 
Sly tos 


E rae format 


берау 


Image size CK equale 
e bytes ыы). 
Proto Elements eren 

fale you ow los cd 
шерын vr a 

aly moden le a rower 


ther J 
Dumb Questions 


The best way lo get fel or quality 
settings andthe various mage formats sto 
experiment wth ham on your own mages. 
You soon figure ой what qualty levels 
aro needed fr your image and the уре of 
web page youre developing. Youll ава get 
doin whan lo use JPEG versus ober 
отан. 


О: wrat is ве number 30 next to he 
d label in the JPEG Options dialog 
tex? 


Д: таттыга at rap 
ient cons Madu aly PEG 
cy usas a sea 0 and Lon, 
— — 
Pa many Po ding — 
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Make sure youre 
8 <n the mage i the 


Mell theta flde 


Noa sne to 


save the image 


О: Couent ute ane. 
lon мав and bight atributs to 
тше my таре instond? 


А: You could use he wi and height 
atributas Io resize an rapa, bul hale not 
ages den Wy? Because yu do hal, 
youre stl Зонт ве lz mage 
and ating Pa browse Goth wo р 
ree бе mage (use vhen uh 
"ho айо rese айп on browsers hat 
support аме) The weh ard teg. 
tirtas aro realy hr lo help he ser 
боле ol ow пил spaca to reserve lor he 
image f you use hem ey should maich 
the dcs айл an ame 
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Fixing up the myPod HTML 


Once you've saved the image, you can close Photoshop Elements. Now all you need to do is change the 
myPod “index hu!” page to include the new version of the photo, “seatle_video_medLjpg”. Here's a 
snippet of the “index bun file, showing only the parts you need to change 


And now for the test drive... s3 


Go ahead and make the changes, save them, and 
reload "indes hum” in your browser. Things 
should look much bener Now the image is sized 
just right to give your visitors а good view without 
‘overwhelming them with a large phot. 
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atm 
‘<head> 
<tit1e>nypoa</titie> 
<etyle type="text/css"> 
‘body { background-color: feaf3da;) 


cat tc HTML roe Yee 
pod pure index html” File, 


den pu 

ete All ү» veed le do is change the 

Жазы m the чер clement to 

tiene of the mage y pt 
ка cle ven vd je 


Me and my iPod in Seattle! хоубап see the 
Space Needle. You can't see the 628 coffee shops 

«e» 

E 
<img arce"photos/seattle video пай: ўра" alt="My iPod in Seattle, WA'» 

</p> 


</body> 


«ља 


Now the mage fits nicely бе 
over window Ard ira smäller 
Fie ine бю dd wil help De 
Page lad more uly 
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— weu miae Format? 1 
7 


* adding images to your pages 
E 
d * 2 


‘Your task this time: open the fle ‘chapterStestimageleye jg” in Photoshop Elements. Open the "Save for Web” 
dialog and fil in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, еіс), as well as. 
PNG-24 and GIF. Yo find this information in the preview pane below the image. Once you've finished, determine 


wich seting makes the most sense for this image. — Format 
= = ae 
Гс Sine of image 


paare F Time to transfer over 
dial-up modem 


Format Quality Size Time Winner 


Try PNG-8 too! 

G PNG-24 P 
JPEG Maximum о 
те High a 
т Mim — — [] 


— m — О 
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adding more images 


More photos for myPod 


A new batch of photos has arrived for myPod: three more from Seattle and a few from 
a friend in Britain, The photos have already heen resized to less than 800 pixels wide, 
Add the elements for them (youl find the images already in the photos folder: 
p 

pes 


Feel free bo add sone of Your 


qune une ‘own photat here as well Just 


<style types text/cs 


perii cid a ЕИ remember to resize them first 
</style> 
</head> 
оар 
poo 
E 
"ei how off your iPod, wherever you mi 
Wanna A is any iPod, from the early 
iPod t iPod Shuffle to 
iPod Video, and a digital с ке a anapahot of your 


your favorite location and ya'll be glad to poat it an 
аге you waiting for? 
</p> 


<h2>seattie, Washington</h2> 
E 


ме and my iPod in Seattle! You can Let's keep all the 

Space Needle. You can't see the 628 Seattle photos together 
P Photos together: 
+» 


img arce'photos/seattle video med.jpg" altw'My video iPod in Seattle, WA"> 
<img srce'photos/seattle classic. Jpg" alt=" classic iPod in Seattle, WA"> 
<img srce'photos/seattle shuffle Jpg" alt'An iPod shuffle in Seattle, WAT» 
<img srce'photos/seattle downtown. jpg" alte"An iPod in downtown Seattle, WA'> 


op 

Same wth the 
азайган, RRR V. кытыы. 
> 


Here are sone ipod photos around Birmingham. We've obviously got aome 
passionate folks over here who love their red. Check out the classic 
Fed British telephone box! 


<p> 


E 
img srce'photos/britain jpg” alte'An iPod in Birmingham at a telephone box'> 
<img srce'photos/applestore.jpg" alte"An iPod at the Birmingham Apple store"> 

</p> 

</body> 
<em> 
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Taking myPod for another test drive 


At this point we don't need to tell you to reload the page 


în your browser; we're sure you're way ahead of us. Wow. 
what a difference а few images make, don't you think? — 
This page is starting to look downright interesting \ 


But that doesn't mean you're there yet. While you've got a 
great set of images on the page, and even though you've 


.. an ale epe Not 
очун tere lon kd i 
Youd more bong, bu i br uer arr don et (7 


of scrolling to sce them all. Wouldn't И be better if uses Here's what 
could see а small “thumbnail” image for each photo, and die whale ase. 
then click on the thumbnail to sce the larger image? looks like now 
sit all the 
find here's what. the page mae 


looks йе now, else vp. >) 


Welcome to myPod 


7777 


Seattle, Washington 


esta ты изиг Yau ша ete pes eth Yon catt кєй te ag 
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using thumbnail images 


Reworking the site to use thumbnails 


You're now going to make this page more usable by substituting a 
smaller image (which we calla thumbnai) for each photo, and then you'll 
create а ink from that thumbnail to cach of the lager photos, Here's 
how you're going to do this, one step at a time: 


Ө счел oeciry fr —— 


Resize each photo to 150 by 100 pixels and save itin a 
“thumbnail” folder. 


Set the src of each <img> element in “index hti 
to the thumbnail version of the photo, 


Ө Ace ink rm each thumbnail to a вен page 
containing the larger photo. 


Create a new directory for thumbnails 


"To keep things organized, create а separate folder for the thumbnail 
images. Otherwise, you'll end up with a folder of larger images 
and small thumbnails ай lumped together, which could get quite 
cluttered afier you've added a significant number of photos 


Create a folder called “thumbnail” under the “mypod” folder I 


you're working from the book example files, уои find this folder 
already în there. 


called bende in 
the "mypod" Felder 
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adding images to your pages 


Create the thumbnails 


You've ри a place to pt your thumbnails, so e's create them. Start by 
opening "cai video, med pg" with your photo editing application. 
You're going to ese йо 150 by 100 pisce wing the same method you 
шейш create the 60 by Юхан 
In Photoshop Elements n change the width Don't forget bo change the 


„ ро be nen Pav fe techn aly 
dece the Sa for WA m «Шы, ju 


— 


With the image resized, choose OK and save it as the ame namebut |f yare working with the example 
in the thumbnail flr. Be earefak i you save it to the "photos folder, fs youl find e thumbnails 
youl be replacing the larger image =” already in the Чч” Folder, 

a e Su EN se you don't have to do every one 
Sew oct tf cee و‎ as GE. a, osve ering HTH, 
vob hateh photo f 


"What about the photos 

from Birmingham they are 

об taller than they are wide, Does 
150x100 make sense? 


Good catch. Because these images are taller than 
they are vide, we have two choices: we can sich. 
the dimensions and make them 100 by 150, or we 
can crop each image and make a 150-by-100-pisel 


thumbnail from it. We're going to make ours МЮ 77 
"by 150; feel free to crop them and create 150-by- 


Е bea ee images if you'd like to explore how to do 
that in your photo editing application. 
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using a thumbnails folder 


Rework the HTML to use the thumbnails 


Now you just need to change the HTML so that the <img> elements get their images liom. 

the “thumbnails” folder rather than the "photos" folder: And because you're currently using 
ive paths like "photos/seanle video. med jpg”, thats going to be simple: for each «ing» 

ment, ай you need to do is change the folder from “photos” to “thumbnails” 

ped 


<etyle type 
body | background-color: Weafida;] 


come to the place to show off your iPod, wherever you might be 


л the fun? All you need is any iPod, from the early 
iPod latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a anapahot of your iPod in 


your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 
</> 
All you need to do is 


<a2>sestt1e, nashington</nz> fade. Fe. че, 
<p> a sided 


Me and my iPod in Seat 
Space Needle. You can! 
«p 


hange the 
[е 


<ing sren"thumbnai1ai 
<img are="thumbnails/aeattle clas 
ава arce"thusbnaile/seatti 


jeattle video med. jpg” alte"My video iPod in Seattle, WA"> 
c. jpg" alt="A classic iPod in Seattle, WA"> 
shuffle. jpg" alte"An iPod Shuffle in Seattle, WA"> 


<ing srce'thusbnaile/seattle downtown.jpg" alt="An iPod in downtown Seattle, WA"> 


ound Birmingham. We've obviously 9 

nate folks over here who lave their iPoda. Check out t 
теа British telephone box! 

«pe 


E 


<ing srce'thusbnalls/britain jpg” alta"An iPod in Birmingham at a telephone box"> 
<ing srce'thusbnalle/applestore jpg" alt="An iPod at the Birmingham Apple store"> 


</p> 
</body> 
E 
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Take myPod for another test drive 


Abl. much better. Visitors can see ай the 
available pictures at a glance, They can also tell 
whieh photos go with cach city more easily; Now we 
need io find a way to link from each thumb 

the corresponding large image 


Welcome to myPod 


ail 


Wait a sec, dori. 
you think you're pulling a 
fast one? The images used to 
һе оп top of each other: now 


they're side by side, 


Right, but rememb. 


the <img> element is 


an inl 
In other words, we didn't “pull anything" Because «1e is 
displayed as ап inline element, it doesn't cause linebreaks 10 be 


inserted before and after the element is displayed. So, f there 
are several images together in your HTML, the browser will fit 
them side by side if the browser window is wide enough. 


son the larger photos weren't side by side is because the 
browser didn't have room to display them next to each other. 
Instead, it displayed them on top of cach other, A browser 
always displays vertical space before and afc 
and if you look back at the screenshots, you'll see the images 


a block element, 


are right on top of each other with no space in between. That's 
another sign <img> is an inline element. 


a dd 


pomum 
35 


linking to the thumbnail 


Turning the thumbnails into links 


You're almost there, Now you just need to create a link from each 


thumbnail image to йз larger version, Here's how this is going to work 


a thumbnail she kes 


Ача 


ay the downtown iPod B- 


the stor 
2» the -e з= бе browser retrieve 
large ge 


Welcome to myPod 


Chek j 


9 


a 
e he 


Ө A link from each thumbnail in "index.html" 
to its corresponding photo рар 


Let's ercate the pages first, and then well come back and 
finish off the links, 
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adding images to your pages 


Create individual pages for the photos 


чм, create а new folder called “html” to hold these individual pages, just 
below the “mypod” folder: 


E ЕЗ = al :–, 


n 
ed, weve дна 
шы e k. 


in the bosk ена. 
Now we're going to create one HTML fle for each photo, If the photo is called леме " 


eule video. med jpg”, chen lets сай the HTML fle "seatle video med hun 
justo be consistent In cach HTML file, we'll have a heading that describes 
the photo, followed by the photo. Here's the HTML for the бен Seattle photo 
All the other pages will follow this same format 


a. 


again just to keep the page 
a consistent lor 
<titlenyrod: s 


<style type="text/css"> body | background-color: fears, } </style> 
[hend 


iode М Here we give the page a destriptive heading 
p— 
= 
<img sre="../photos/seattle video med. jpg" alt-"A video iPod on the ferzy"> 
</> VC— T 
Pe Here's the <img> clement that points to the large 
ind scale 


des cd jpa" Photo Lets alto give the 

image 3 descriptive all attribute 

Notice that we need to wie" in the velabive path 
because the "hml" folder is à sibling of the Wels 
folder, so we have to so up one elder and then down 

into “Photos” when using relative links 
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linking with <a> and «img: 


Ifyou lookin the "himi" folder in the chapter example fes, youll find al of the single photo 
e, pates already there, except one—the page for este downtown jpg". Create a page called 
Exegcise  ‘seattle_downtown him in the "html" folder, and test it out. Get this working before you move on. 
Vau fnd the answer in the back of he chapter f you have алу problems. 


So, how do | make links out of images? 


You've got your large photos, your smaller thumbnails, and even a set of 
HTML pages for displaying individual photos. Now you need to put it all 
together and get those thumbnails in "indes, html" linked to the pages in the 
"hm" folder, But how? 


To link an image, you put the «Leg? element inside an <a> element, like this 


ету tag eb tees / betet. dovere htn", which 
" ее / eri be, 
De alle domon SSE EY IEEE SEINE 
ud SP cing тшш satt ы не 
eee a alte"An iPod in downtown Seattle, WA"> 


</a> 


N 


prm directly wide the <a> element 


Once you've placed the «ina» element into an <a> element, the 
browser treats the image as a clickable ink. When you click the 
image, the browser wil retrieve the page in the href. 
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Add the image links to “index.html” 


"This is the last sep, You just need io wrap <a> elements around cach thumbnails <img: 
clement in your "index hun!” fle. Remember, the bref of each <a> element should link to 
the page containing the large version of the image in the “hun” older. Make sure that your 
Tinks, thumbnails, and pages all match up correctly: 


Here the complete "indes, tml” file, АШ you need to do is add the HTML marked in gray 


p 
<head> 
etitlessypode fti tla» 
<etyle type="text/css"> 
body { background-color: Weafida. 
</style> 
</head> 
<body> 


‹э1>не1соде to туров» 
E 

Welcome to the place 
An the fun? All you need is any iPod, fi 


ow off your iPod, wherever you might 


are yeu waiting 
</p> 


азан 
E 
n't see the 628 coffee shops 


, Nashingtone/AZ» 


Needle. You 


E 
<a hrefehtnl/seattle video med.html'» 

<img sro="thunbnails/seattle video med.jpg" alte"My video iPod in Seattle, WA"> 
<a> 
<a hrefa"html/seattle classic heml"> 


<img srce"thusbnaile/seattle classic jpg" alt"A classic iPod in Seattle, WA"> 
</a> 
<a hrefehtnl/seattle shuffle.html*» 

<img src="thunbnails/seattle shuffle.jpg" alt"A ipod Shuffle in Seattle, WA"> 
</> 
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adding the links to the thumbnails 


<a hrefehtnl/seattle downtown.htal*» 


<ing srce"thusbnaile/seattle downtown.jpg" alt="An iPod in downtown Seattle, s 


</> 
E 


<h2>sirminghan, England</ha> 
E 


Here аге some iPod photi 


red British telephone box! 
</p> 


E 
<a hrefe"html/britain.html"> 


aionate folka over here who love their iPoda 


We've obvia 
Check cur 


аһан. 


<ing re- thuabnails/britain. jpg” alte"An iPod in Birmingham at a telephone box"> 


<> 
<a heefa"html/applestore.heml"> 


<ing sre="thumbnails/applestore.jpg" alte'An iPod at the Birmingham Apple store"> 


<a> 

</p> 

</body> 
</html> 


Add these <a> elements to your “index hm 


For ath бима! mage, wrap an a> element around i 
Меге» grt the gh href im each In 


چې 


бок, andl eto your ron and heck ont yl 
therearene . 
Dumb Questions 
О: wea putan <a» бөтөн around txt, we getad cant wo just ink to the JPEG image act without at 


underline. Why don't we get something equivalent with images? 


А: ian oat ere a terser around an mage 
toto ise (roma Salan coast a) yr 
it ta od si or eed дө жи 
‘asthe hon он тав up nv ar hou 
баи anh CSS. As тке ator prone 
ori gyre geo eat you ean lon 
tinea a most casos ш ш an пор 
ita cn syn eon лата no ret 
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those HTML pages? I thought the brows 
display images by themselves. 


т was smart enough to 


А: xi ight: you out ink ct n o inage, ta i: <a 
. <ia» Туш dê al and 

kicka on te tonto ply raga ye 

{aban page. Ingenta hough kg det ban пара 
‘erred a om bra you ily vant to poe оте 

Sent rhe тс барат 
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The myPod web page 
i looking awesome) Zink 
should add a logo to the 
Flos that would odd a great 
finishing touch 


Great idea, In fact, we've gota myPod 
logo all ready to go. 


Take another lok inthe folder 
“chapter5/mypod", and youll find a 
folder called “logo”. In that folder you'll 
find а file called "mypod psd". The 
"pud" means that the le has been saved 
in the Photoshop format, a common. 
format for image editing software. But 
Photoshop format files are meant for 
processing digital images, not for weh. 
pages, зо we'll have to do some work to 

4 get a "web ready" image from it 


AF You don't have Photathop 
Elements, follow along for 
the next few pager 
application can't open 
T yo bind ta 
cath step in the 


IF yer 
the ed 
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adding a logo 


Open the myPod logo 


Let's check out the myPod logo: open up the file “mypod psa” 
Jn the “chapter5/myposl/logo” folder in Photoshop Elements: 


Yeu! ind the "lene folder m 
bete fees folder 


= 


IE your photo editing 
application won't open 
Же file, follow long 
anyay the same 
recte apply for 
iher formats as vell 


A closer look... 


Nice logo; its got some typography combined with two circles, 
опе gray and one white (obviously inspired by the dlick-wheel 
controls on the classic iPod) 

But what is that checkered pattern in the background? That's 
the way most photo editing applications show you areas that 
are transparent, Keep all that in mind as we choose a graphic 
format fr the logo. 


Whenever you see Bie 
chetkered pattern, 
that indicates a 


myPod oo 
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adding Images to your pages 


What format should we use? 


You already know that we have a couple of options in deciding how to save this 
image: we could use JPEG, PNG, or GIF. This logo uses only three colors, text 
and some geometric shapes. From what you've learned about the two formats, 
you're probably leaning toward PNG or GIF. Either would be fine; the PNG 
might be a slightly smaller file at the same quality so we'll go with PNG. And, 
because we only have three colors, we'll be safe using PNG- which allows only 
256 colors, so using this format will reduce the file size even more. 


So, go ahead and choose the “Save for Web" option under the File menu, and 
then choose PNG- in the format drop-down. You'll see we have а few more 
options. Lets take a look, 


Remember seth pl 
men to tel the fanat 


We 
те going to set the n 

fo Heres where Phebuho? 
egg MES ae Elements shows you the 


жее, of olors being 
мей do save the PNG, 
Ws already sek to the 
— atem For PNE-@, 


a 255. Wel leave it there 


РМ ths 
Transareny chetkbon 
appears By default 
AS chetked Do we 
sant a transparent 


‘transparency, as 


m Yell see im à set 


— xm 


— | Ed rame pe 


Tey ontheeking the Trasparenty chetkbor 
yell sac De PNG preven at De bottone 
hange to a white background 
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choosing transparency 


To be transparent, or not to be transparent? 
That is the question. 


"The myPod logo is going to be placed on a light green 

background, so you might think that transparency is going 
to be a good thing, right? Well, let's compare 
Jooks using а few options in the "Save for Wel 


w the logo 
dialog: 


Mere the lage saved in hree different ways and 
displayed on 3 web page wth a green baron 1 


"T 
without. transparenty BUR. |. 
Verres белү a 


Here's what we gek if we the 
Transparency ard save. Better 
but whats lat white hale 

around the letters in the logo? 


“The halot happen because the 
photo editing application Creates 
3 matte" do soften the text's 
"ders against the background 
le When it did Dat for hie 
Jogo, however assumed iE was 
softening the edges agains à 
shite backround 


Ah, now we've talking this looks great For this 
version we tald Photoshop Elements to create the 
matte around the tent wing а green backgroud 
Wow? Wl how qure m 
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adding images to your pages 


Save the transparent PNG 


You know you want a transparent PNG version of the logo, 
and you also know we'll need to use a matte to prevent the 
halos around the text. Ler% check out the PNG panel of the 
“Save for Web” dialog. 


Now we need to take a look at 


Ма check 
the Matte option 


Transparent 


The Maite ордоп allows you to select the color for the matte 
around the text. And we want that to be the calor of the web 
page background, The Matte option 
supplies the tolar for 
softening the edger of 
the text Sine the web 
Page is a light green we 
want fo we the same 
talor for the matte 


M 


Se 


Choose “Other.” sine 
cow tolor isn't listed 


ETE 
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what is the background color? 


Wait, what is the color of the web page background? 


‘Remember that Reapg Ваке C88 in the myPod “index.html” fle? 

That CSS is what sis he background color of he page ih 

кч. As that vere We can gt he elo 

eyle typen"text/ess"> Vere’ the eures 
. 

</style> Е 


Set the matte color 


When you click on the Matte pull-down menu and choose the "Other..." menu 
‘option, Photoshop Elements will bring up the Color Picker dialog 
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Set the matte color, continued 


Go ahead and enter the color, “calla into the "Color Picker” dialog box, 
Чоп sce the color change to the background color of the myPod page. 


gum 


Check out the logo with a matte 


Now take a close look at the logo again in the preview pane. You'll see Photoshop 
Elements has added a light green matte around the hard edges, which will give the 
1myPod logo text a softer, more polished look when the logo is in the web page 


images to your 


ht here 
I 
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fealty for 


saving the logo 


Save the logo 


Okay you've made ай the adjustments you need to in the 
dialog, so go ahead and click OK to save the image as “урой pna? 


ave for Web" 


— 


— Elements wil bel, 
С = =) charge the extention of Your 
Where: (eo w Blename te "pra. Save the 


image as dry in the 


ED D 


Add the logo to the myPod web page 


Now all you need 10 do is add the logo to the myPod web page 
‘Well add it to the top so it appears above the website description 
and iPod images, That way it the first thing your visitors see 
when they come to your myPod page. 


<html> 
p 
<title>nyrod</title 
<style typen"text/css"> 
555 Add the logo image at the top of the 
ee od web раце Remember {ш ме the 
И caret et for bhe ie 
in the loge" Folder, and add an alt 
€ attribute that бее the mage 
Fc 
ч» 


<мїэме! сове to ayrode/n1> 
Reo indent! HTML here 


</body> 
<html> 
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adding images to your page 


And now for the final test drive ts 


Let test this puppy! Reload the web page in the browser 
and sce how your myPod transparent PNG logo works 


Welcome to myPod 
a in pot ot: ынын үн пем nf a A eu 
Seattle, Washington 


——— ue Ne Yat cet eee as eg 


Excellent work 
The logo looks great. 
You've got a kick-ass 
myPod website herel 


.. мехе нца варана панаа 
ear ce ah we 


а © 
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questions about i 


there are no 
T D Questions 


Dum 


О; Do ишу need to know al this stuff about image emen С): Wy l g mak the logo backround color sald and 


to write good web pages? 


— ta age without any ng 
ein apt araa prc Pa Wen so nie 
Pow mages uot ca realy ар Seine us an тад or wo 
ras diferenca uu od ap ard a rale Tu 
aatto sa ages sen lem as rg 


О; why does ве text naed ts ede: 


55 
myPod 
myPod 


Youll se the op version has very hard, jagged edges and s los 
readable. This в he way ex is displayed by dau on a computer 
‘sereen. The second version Каз had ls edges веле using a 
technique called ant-atasing. Words hat are antalasad on a 
computer screen are теке readable and more pleasant 1o he eye. 


О: so whore dons tha mat cone in? 


. ag ate o be 
айша eni you p бе ote verson cl оро бот be 
peius QUA apis aloud background, yaf eê las ie 
Oei To Nate opten a Patsy Eons sows ouo 
‘pet cir Pedro tele be pacad on o 
"n ato lur dora gat aco 


О; toes tis technique just wor tor tert? 


ДА: vers tar any inos in your ари hal тун нода 
"ides Check оле шде in те myPod log: h was maad i 
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ma e cote we pope 
А: You anis ae ato, te isone shat: 
tra gs In your vb pape alo showing rog be 
area, Fn ey wot beeen wih hs cok vers, 
Vau tavan or any camps lh Yel tan ve и то CSS, 
moa. 


O: watit ichange my background color ater imate me 
ied oon? 


Å Asiant atone background cor pty кодат ы 


roezable; however. you change the color dramatically, youll have 
lo recreate the PNG wih a new matie color, 


If you're placing а 
‘transparent image in 
your web page, make 
sure the matte color of 


the image matches the 
background color of your 
web page. 


You can use PNG or 
GIF format for your 
‘transparent image. 


adding images to your p 


S IULLET POINTS 


Use the «img» element to place images in your 
web page. 

= Browsers reat <img> elements alite differently 
than other HTML elements; after reading the 
HTML page, the browser retrieves each image 
fom the web server and displays it 


= Ifyou have more than a couple of large images 
опа web page, you can make your web page 
‘more usable and faster to download by creating 
thumbnails -smal images that ће user can dick 
опо see the large version of the image. 


= The <img> elementis an inne element, which 
means hat the browser doesn't put a inebreak 
before or afer an image. 


* The sre attribute is how you specify he locaton 
ofthe image fle. You can include images from 
your own site using a relative path in the ste 
attribute, or images from other stes using a URL. 

= The at attribute of an <img> elementis a 
‘meaningful description of he image. tis 
displayed in some browsers ithe image cant 
de located, and is used by screen readers to 
describe he image for the visualy impaired. 


- Awidth of less than 800 pixels is a good rule 
of thumb for the size of photo images in a web 
page. Most pholo images that are created by 
diii camaras are too large for web pages, so 
youll need to resize them. 


= Photoshop Elements is one of many photo 
editing applications you can use to resize your 
images. You can also use one of many free 
online tol to resize images. Just search for 
"ree online image editor” 


== Images that are too large for the browser make 
web pages dificult to use and slow to download 
and display. 


JPEG, PNG, and GIF are the three formats 
bo images that are widely supported by web 
browsers. 


The JPEG format is best for photographs and 
ober complex images. 


The GIF or PNG format is best for logos and 
other simple graphics wih solid colors, lines, or 
text 


JPEG images can be compressed at a variety 
of diferent quales, so you сап choose the best 
balance of иайу and fle size for your needs. 


The GIF and PNG image formats allow you to 
make an image with a transparent background. If 
you put an image with a transparent background 
in a web page, whats behind the image, such 
as the background color ofthe page, wil show 
through the transparent parts f the image. 

GIF and PNG are lossless formats, which means 
the fle sizes are likely to be larger than JPEG. 


PNG has better transparency control than GIF. 
апі allows many more colors than GIF, which is 
Smite to 256. 


PNG has three diferent size options: PNG-24 
(supports milions of colors), PNG-16 (supports 
thousands af colors), and PNG- (supports 256 
colors), depending on your needs. 


In Pholoshop Elements, use ће Matte color 
menu in the "Save for Web" dialog to choose. 
the right color for softening the edges of your 
transparent PNG or GIF image. 


Images can be used as links to other web pages. 
To create a ink from an image, use the <img> 
clement as the content of an «a» element, 

‘and put he link in the href айе ofthe <a> 
element 
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тоге left brain goodness 


HTMLeross 


Mes time to give your right brain another break and put that lefi brain. 
to work АШ these words are HITML-related and from ibis chapter 


Across Down 

1. With JPEG, you can control this. 2 The alt attribute improves this. 
anl weh rome ia efe. 4. Sol images ona pege. 

5. PNG and GIF have it, JPEG doesn't. 

8. Miles you can draw with a pencil. 

10. Web server makes а request for each one of 


transfer it. 
9. Better for photos with continuous tones- 


hese. 
11. Smallest element on a screen. 
12 You used Photoshop Elements to do this to 


images. 
13. Lovable МРЗ player. 
14. Better for solid colors, ines, and small text. 
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adding images to your 


" * 


WHICH IMAGE FORMAT? 
Se 


‘Congratulations: you've been elected "Grand Image Format Chooser" of the day. For 
each image below, choose the format that would best represent it for the Web. 


JPEG or PNG or GIF 


A phata it lobs oF бөө 
Ке d оо 


a le of colors with some 
m шил o d d 
Мо transparency? PNG might, 
далу А 


A gheto with loks of cal д 

] unc d o 
ard iE ү» vant a transparent 

ord, go with PNG 


aks tnd ie 4 m 
Vos a PNG or GIF. I yo reed 
e О 
63 а ойна the edger and PNG 
veel be beter fr that 


Ти nige ie berdine Eh 
lets of нш ters СРЕ), di hj dí 
y E abe shy eee 
(GIP) and you 1 de 


se this in 3 мау 
блага 
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Heres ren your peri thats actualy about prc (oh, and mages tool 
pos piden n Sa ar n 


What's that got to do with images? To find the answer, you had to write some. 
HTML The answer to this trivia В contained in the mage that is at the URL http 
. Your jab was to add an image to 
this HTML and retrieve the answer. Here our solution. 


pen 
pes 
— 
реч 
ed 
+» 
‘ing RET KREG EY ER RES 
<p 
pu | J 
pem V you put the mage here, You tan et 
„= tthe экме when you lead the page \ 
Y 
enn — 


E E 


Hw ма ме ае os draw wh ве урен рте 


СС ‘The typical new pencil can 


j 728 


Source: http//www: com 
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adding Images to your pages 


Неге are the results of having a broken image in a few different browsers. In most cases, the 
browser is able to use the extra alt attribute information to improve what s displayed. Why do 
же care? After all, this is an error in a web page; we should just f, right? Well, in the real 
‘worl, things are often not ideal; sometimes things break, Internet connections go bad in the 
load, or visually impaired users need to hear what is in the because 


F печ i че уан эһ yp ps 


IE барар the alt 

ee tent along vith The Chrome browser displaye a broken 

Ve broken image ion image icon, bet doesn't display the 
Ted inthe alt attribute. 


mnm— 


» 


Safari on the Mae 


doesn't make good use 
of the alt stir 
rom broken imaget 


неч long a ine п you draw with the typical pera 


— 


Мр. Fa betat, 
Opera on the Mac dern the te 
рита А perum 
aie te 
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* 

+ * * 

WHICH IMAGE FORMAT? 
reel 


‘Your task this time: open the fle "chapterSlestimageleye jpg" in Photoshop Elements. Open the "Save for Web” 
dialog and fil in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, еіс), and also try 
PNG-24 and GIF. Yo find this information in the preview pane below the image. Once you've finished, determine 
wich seting makes the most sense for this image. 


Note that your nmbers may differ depending 
on the verson of sober You are a 


Format Quality Size Time Winner 


MOLE N/A э bg seeonds L 


EM iem LI 
Medium | 
т low Ж dee LI 
ғ м 


le the winner кей} Medio Not veteri | all depends on what your мен re ЇЇ you vant a 
. ө, mh warê Very Hgh [E jo wink the fate oil ste, then 
dy Low Wve бик Medion berane 4 u a ite забе in ише versos the ty of the maye 
Ye es] бәй Low и кй етей, or бый worth apg De ey of Ы igh Co e 
very etie. Ove hing i or tre, however FG ard IF don't vark very wl Tor бы mage 
leh ould nt be a write) 
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images (o your page 


I you look in the him folder with the chapter examples, youll find all of the single photo pages 
already here, except one: the page far "seattle. downtown jg’. Create а page called "seattle 
кексе downtown himi” in the “him folder, and test it out. Get this working before you move on. 
lotion Here's he answer: 


Here's the HTML: # file ода 
be called "seattle_dowrbounhtnl 
) 
p ) 


«ritlessysod: Seattle Downtcune/title» 
<style type="text/css"> body { background-color: Weafida; } </style> 
</head> 
<body> 
pu 
E 
«ing arce"; photos) 
m 
</body> 
</html> 


</mi> 


wattle downtown.jpg" alt="An iPod in downtown Seattle, WA'» 


Wia file shold go in the 
ыы 


Mer under "ood 


Here's e test drive 
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QE HTMLeross Solution 


GATT 
c 
CONC 


© 
» 
» 
m 
z 
4 
< 


TRAN 


a 
eee 
= 
» m E O 


our il 


<img src="photos/seattle.jpg" alt="My iPod in Seattle, WA"> 
</p> 
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6 standards and all that jazz 


* Getting Serious with HTML 


What else is there to know about HTML? You're well on your way to 
mastering HTML. In fact, isn't it about time we move on to CSS and learn how to 
make all this bland markup look fabulous? Before we do, we need to make sure your 
HTML is really ready for the big leagues. Don't get us wrong, you've been writing first- 
class HTML ай along, but there are just a few extra things you need to do to make it 
“industry standard" HTML. is also ime you think about making sure you're using the 
latest and greatest HTML standard, otherwise known as HTMLS. By doing so, you'll 
ensure they'll display more uniformly across all browsers (at least the ones you'd care 
about), not to mention, they'll play well with the latest -Devices (pick your favorite) 
You'll also have pages that load faster, pages that are guaranteed to play well with 
CSS, and pages that are ready to move into the future as the standards grow. Get 
ready, this is the chapter where you move from web tinkerer to web professional. 
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writing standard himi 


Hey guys, the 
boss just sent on email. 


Before we add CSS to the Head 
First Lounge, he wants us to make sure 
our HTML is ready for prime time 


im: Ready for prime time? 


Franke: Yeah, you know, make sure it's totally legit and 
ready for HTML. 


Dur HTML is just бас, here look at itin the 
эзет. It looks beant, 


s Yeah, thats what T think., -he's just trying to give us 
another thing to do. 


Franke Actually guys, I hate to admit it, but 1 think the 
boss is right on this one 


кәч Jim, Joe: Huh? 


Frank Up until now we've pretty much ignored the fact 
that there are standards for this stuft, Not to mention there 
are different versions of HTML, like HTML 4.01, and 
now, HTMLS, Are we doing everything w 
sure we've got HTMLS covered? 


Joe: Come on, this is just going to mean even more work, 
‘Weve already got enough to do, Really, the page looks fine 
Туе even tested it on some of the newer devices, 


need to make 


Frank: That may be, but what I'm saying is that I think 
this will help us do less work in the future 


Joe: Oh yeah? How so? 
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standards and эй that j: 


Frank: Well if we make sure our HTML is up-to-date with current 
standards, we won't have to make as many changes down the road. We 
should also make sure everything else is correct; you know, our syntax 

and all that. There are so many different browsers and versions of those 
browsers that if we're making mistakes in our HTML, then all bets are off 
in terms of how our pages will ook in different browsers, And when we 
start adding presentation to HTML with CSS, the differences will get even 
more dramatic if our HTML isnt up to st 


Joe: So, by making sure we're adhering to the "standard," we'll have a lot 
fewer problems with our pages displaying incorrectly for our customers? 


Frank: Right 


imi If u reduces the m 
good idea to me. 


Joe: Al right, how do we start? Don't we adhere to the standards now? 
Whats wrong with our HTML? 


nher of З ала. calls I get, then that sounds like a 


Frank: Maybe nothing, but the boss wants to be current with HTML, 
жо we need to figure ош which version of HTML we're using and if it's 
not HTMLS, what we need to do o get there And, when we're done, Ше 
should be much easier when we start using CSS, 


ERAN 


Sees 


Browsers all do а pretty good job of consistently displaying 
your pages when you write correct HTML, but when you make 
mistakes or do nonstandard things in your HTML, pages are 
often displayed differently from one browser to another. Why 
do you think that is the case? 
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A Brief History of HTML 


HTML 1.0- 


These were the early days; you 
could fit everything there was 
to know about HTML into 
the back of your car Pages 
weren't prety, but at least 


they were hypertext enabled. 
Ко one cared much about 
presentation, and just about 
everyone on the Web had 
their very own "home page.” 
Even a count of the number 
‘of pencils, paperclips, and 
Post-it notes оп your desk 


was considered “web conte 
back then (you think we're 
kidding) 


1989 
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HTML3 


The long, cold days af the 
“Browser Wars" Netscape 
and Microsoft were duking it 
ош for control of the work 
Айт all, he who controls the 
browser controls the uni 
ght? 


At the center of the fallout 
‘was the web developer, 
During the wars, an arms 
race emerged as each browser 
company kept adding th 

onm proprietary extensions 
in order to stay ahead. Who 
could keep up? And not 

only that, hack in those days, 
you had to often write two 


separate web pages: one for 
the Netscape browser and 
опе for Internet Explorer. Not 
good. 


HTML 4 


Alhh..the end of the Browser 
Wars and, to our rescue the 
World Wide Web Сопвопаш 
(nickname: W3C). Their plan: 
то bring order to the universe 
by creating the ONE HTML 

“aandard” to гше them all. 


The key to their plan? 
Separate HTML structure 
and presentation into two 
languagesa language for 
structure HTML) and a 
language for presentation. 
(CSS)—and convince the 
browser makers i was in their 
best interest to adopt these 
standards 


Ви did ther plan work? 


Uh, almost.. wih a few 
changes ce HTML 4.01). 


standards and all that jazz 


bon chapter, our дой н to write proper Hs Ac abays, th 
world keeps moving to well aba ial ; ab 


Starting vi 
about where things are going 


HTML 4.01 HTMLS 


The good Ше: HTML 4.01 Just as we were all geting comfortable, ОГ course, with no support from the 
entered the scene in 1999, and “a shiny object distracted everyone. ‘community, the marriage didn't end 
‘was the “must have" version of ‘That shiny object was XML. In fact, it well and was replaced by new version 
HTML for the nest decade. really distracted HTML, and the woof HTML named HTMLS, With its 
„ 0 gothitched in a shotgun marriage that support for most of the HTML 4.01 
LOI wasn't really a big change edis XHTML 1.0. standard, and new features that reflect 


from 4.0; just а few fixes wes 
needed here and there, But ТМП, promised to end all the 
compared to the early days of woes of the Web with its adhere 

HTML (when we all had to walk strictness and new way of doing things. 


the way the Web has grown, HTMLS 
is what developers were looking for 
And, with features like support for 
blog-like elements, new video and. 


barefoot ines et of mot? Dl ry only problem ur peopleended graphic capabilis, and a whole new 
both ways, HTML 4.01 allowed ap hating XHTML. They didn't want set of capabilics aimed at building 
usali vo sleep wellat night н 222 
anew way to wrie web pages be,, webapps, HTMLS was 
Knowing thar ot rowers 
Knowing hat almon all browsers duran what hey deine to become the standard 
T already had with HTML 4.01, Web 


"To be honest, the divorce of HTML 
and XML took a lot of people by 
surpris, leading to confusion about 
what HTMLS actually в fora while. 
But that’s all heen sorted out, so read 


Бош) were ой 
‘our content just fine. 


1o display 


developers were far more int 
in HTML’ flexibility than ХИТ 
stricines. And, more and more, these 
developers wanted to spend their time 
creating web pages that felt more like 

applications than documents (more on. 
web apps later). 


оп to find out what HTML means to 
уоп, and how you can join in he fun. 


2009 2012 


And what will happen in the future? Will we all 
be going to work in ying cars and swallowing 
nutrition pil for dinner? Keep reading to find ош. 
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browsers and html versions 


The Browser Exposed 
This week's interview: 

Why do you care so much about 
which HTML version I'm using? 


Head First: We're glad to have you here, Browser. As 
you know, "HTML versions" have become a popular 
issue. What's the deal with that? You're a web browser, 
afier al. 1 give you HTML and you display it the best 


Browser: Being а browser is tough... there are a lot 
of web pages ош there, and many are written with old 
versions of HTML or with mistakes in their markup. 
Like you said, my job i to try to display every single 
one of those pages, no matter what 


Head First: So what's the big deal? You seem to be 
doing a pretty good job of it. 


Browser: In some cases, sure, hut have you ever 
locked at your pages on а lot of diferent browsers? 
When you are using old or incorrect markup, your page 
may lok great on one browser, but not so great on 
another 


Head First: Really? Why is that? Don't you all do the 
same thing? 


Browser: We do a great job of doing the same thing, 
ийе шеле displaying сот and up-to-date pages. Like 

said, when you venture into pages that aren't writen 
well, then things get a lot dicer Here's why: all af us 
browsers have the HTML specification to tell us how to 
display correct HTML, but when it comes 1o incorrect 
HTML, we just wing it So, you might get very different 
behaviors on different browsers, 


Head First: Ahh. So, what's the solution to this mess? 
We definitely want our pages to look good. 


Browser: Easy Tell me up front which version of 
HTML you're using. You'd be surprised how many 
pages don't even do that, And make sure your page 
doesn't contain any errors; you know, mismatched 
markup tags, that kind of thing, 
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Head First: How do we tell you which version we're 
uing? Especially now that we're all moving on to 
HTML 


Browser: Well, HTMLS is actually making things a 
lile simpler. 

Head First: Really? How isa new version of HTML 
helping? I would have thought yet another version 
would just make things even more difficult, 


Browser: lcs true that any new version of a language 
causes growing pains as everyone tries to catch up with 
the latest standard. But HTMLS simplifies the way you 
tell me the kind of HTML you've using The HTML 
standard is also documenting many of the errors that 
сап occur in web pages, o that all the browsers can be 
more consistent about how they handle those errors. 


Head First: Oh, so does that mean we don't have 
to worry about making errors when we're writing our 
HTML? 


Browser: No! Just because we can handle errors 
better doesn’t mean you can be sloppy. You stil want 
your page to be consistent with the standard and 
written without errors If you don't, you might get 
inconsistent results across browsers, and let's not forget 
the browsers on mobile devices, too. 


Head First: Back to how we tell you what version 
we're using? 


Browser: Yeah, that used to be a total pain in the. 


Head First: Uh, watch й, this is a PG-rated audience, 
and we're running out of time, quickly! 


Browser: Okay, you can tell me all about the version 
of HTML you're using with a doetype. Is a little bit 
of "markup" you can use that goes at the very top of 

your HTML йе. So, given we're out of time, go check 
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standards and эй that j: 


ҤТМЇ. 
Archaeology 


We did some digging and found some old HTML 4.01 and XHTML 1.1 
pages. These pages use a doctype, at the very top of the HTML file, to tell 
the browser which version of HTML theyre using. We've snipped out a 
couple of doctypes for you to оок at. Check them out below. 


You tan type is all 


con one ine, or f ү» 


is jat This park says we've 
This means - sank you tan add a 
Serbe bet ln nane using HTML version к 

de Batat ила Оаа that HTML убит where we did 

d cement, standard oar wien 

ме. ко] Esa. s Rekum 
e breve r ae n beleen the parts m 
A * 2 Y the sates 


<!ростүрЕ Html PUBLIC "-//W3C//DTD HTML 4.01//EN* 
"http: //wew.w3 .org/TR/html4/strict.dta"> 


po ДИЯ E em eae. ce) 


tite that this is NOT an HTML 
eret миз T en the ™< 
SE Ue begjrvingy which tels you 
hi а something different 


that identifies this 
particular standard 


аан 
њован DONE nem liie eximi 


y version of XHTML 
DOCTYPE html 


PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
“http://www -w3.org/TR/xhtn111/DTD/xhtm111.dtd"» 


HTML 
For more on XHTML, cet out the append meti 
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guess the docty; 
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Mete 


Rather than tell you the doctype definition for HTMLS, we thought you might want 
чо have fun working it out on your own. Take another look at the HTML 4.01 doctype 
definition below: 


Thie park sayı we've vina HTM 
version 401 and hak th 
markup а written in ENS 


<!гостүрЕ hem) PUBLIC "-//w3C//DTD HTML 4.01//EN" 
"http: ава м3 org/TR/htm14/strict.dtd"> 


7 


тма points to a file 
identifies this standard, 


Remember, the doctype definition belongs at the top of your HTML file and tells the browser 
the type of your document—in this case, HTML 4.01. By using a doctype, the browser is able 
to be more precise in the way it interprets and renders your pages 


So, using your deductive powers, what do you think the doctype definition for HTMLS looks 
like? Write it here you can refer back to your answer when we cover this on the next page, 
and no peeking at the answer! 


r 


Jor эмче gots here 


The new, and improved, HTML doctype 
Ошу get sendy for it: Не the HTML doctype 


<!doctype html> 


? mR 


at one line; би mi 


And it's really simple! 

How close was your answer in the Sharpen Your Pencil? This is much simpler, wr sympathies 

wouldn't you say? And, wow you might even be able to remember it without re who had 

having to look it up everytime you need a doctype the old dectype 
tattooed en 
her palms to 
remember it 


Wait, isn't this supposed to tell 
‘the browser the version? Where's the 
version number? Is that a typo? 


Good point. No, it's not a typo, and let's step through why: you 
know the doctype used to he a complicated mess full of version 
numbers and ugly syntax. But with the arrival of HTML, the 
doctype was simplified so that now all we have to do is tell the 


browser we're using "hii; no more w 
version numbers or languages or pointin 


туйш about specifie 
тоа standard. 


How can that be? How ca 


we just specify “ып” without the est? 
Doesn't the browser nos that other information? Well, as it turns 
ош, when the browser sees: 


<!doctype html> 


it assumes you're using standard HTML. No more getting all hung 


up on version numbers or where the standard is located; in fact, the 


HTML standard has become a “living standard,” meaning that 
а will continue to grow and morph as needed, but without fixed 
version numbers, Now, you're probably thinking, "What exactly 
does a Firing standard mean? How is that going to work?" You'll ee, 
on the nest page 


html is backwards compatible 


HTML, the new “living standard” 


‘You beard us right. rather than continue to crank ош version 6,7, В of HTML, the 
standards guys (and gals) have turned the specification into а living standard that will 
document the technology as it evolves. So, no more version numbers. And you can stop calling 
ie HTMLS because ics just "HTML from here on out, 


Now you're probably wondering how ibis is going to work in practice. After all, if the spec is 
continually changing, what does that mean for the poor browsers? Not to mention, for you, 
the web developer? One key to this working is bh compatibiliy. Backwards compatibility 
means that we can keep adding new stuff to HTML, and the browsers wil eventually 
support this new stuff, but they'll also keep supporting the old stuff. So the HTML pages 
you're writing today will keep working. even after new features have been added late. 


Werk on all thot 
н erk mah ah faney ree 
Works ow Works on all M Dae pt 


IE, Chrome M browsers ме kavent 
1, Firefox ы 5 even thought: of yet! 
прн Te oF exe 


е " Yer HTML fron dg 
Notice cath new version ia getting a little bigger este ү rom today stil 
new auth is beng added, but the old stuff skill wera! works because the old sl i 
Gi ported 
demgem . 
Dumb Questions 
. IIe spec cane somehlno youre CD: what exaey sa spac, any? 
changes tomorrow? What do do? already doing, мо ha way an element or 


tind works, Dan browsers are supposed 

"o continue lo suppor the cid way youre 

A: "шр! wel asthe non way. Tots e! species hal he HTML standard is; thal, 
youre wing sold HTML today and шиш neat meme Now te Wat elements and aliibules are in HTML, 


he spectcaon is he document hat 


‘he spec changes tomorrow loincorporate avau a gaou ting Галата нано, andor. Тв document ismaiained by 
now element hen youcanjustkeep f Wide Web Consorium (W3C, o 
an dolng мна youre dig. Is up lo you asa web developer keep poate onthe Short but anyone can conti o and 
ata you wartta use алтан een! Scand change your pone ene Pave a say n Row Ine standard Is developed, 
orm anges, but the ea в Pat your HTML wil 


continue lo wok as be spec changes 
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standards 


Okay, T think weve 
got ît now, Lets get that 
doctype in the lounge files and 
update these pages to HTMLS, 


inde 
(AE 


e^ 


to the Mew and Improved 
дака git" 


679 


a 1 ixi .htnl">eli xl rs</a>, conversation and 
<евосапсе Dance sevolurion</em> 
їз always provided; BYONS (Bring 
<I> 
<ha>Directlona</h2> 
<> 
<a refe "directions-htnl'»4e-. onse». 
< 
</body> 
ejnt» 


Adding the document type definition 


Enough talk, let's get that doctype in the HTML. 
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testing with a doctype 


The doctype test drive 


Make the changes to your “lounge html" file in the 
‘chaptct6 lounge” folder and then load the page in your browse 


Welcome to the New and 
Improved Head First Lounge 


. 
/ Saad I soreness 
"MM —- um 
ay epee ary because al the Directions 
ete te joe 
ber sore you're ving HTML ERSTE ae 


—————— 


‘Add а doctype to the “directions him and "lir Nin, fle as well Go ahead and give them a good 
test. Just ike "ounge htm, you won't see any fireworks (but you might sleep а bi beter tonight) 


Exercise 
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HTMLS Exposed 


This week's intervie 


What's the big deal about HTML5? 


Head First: HTMLS, you're the “latest and greatest 
version of HTML that everyone's yammering on about, 
but our readers want to know what's зо great about yo 


HTMLS: First off, Гуе got а hunch of new elements and 
some new attributes too. 


Head First: We don't seem ta be using any of those yet, 


HTMLS: АП the elements you're using are part of my 
standard now, so you're using HTMLS elements, But no, 
you're not using any of the nac ones yet, 


Head First: Why not? Shouldn't we be using all the 
newest elements as soon as posible? 


HTMLS: Not necessarily: Remember (iom Chapter 3; 
lays use the right element for the job! And my newest 
elements have specifie jobs. Some of them are for adding 
more structure and meaning to your page. Like my new 
ателе element, which is specifically for things like 
blog posts and news articles, 


Head First: We could have used that in Chapter 3 for 
Tony's blog right? 


HTMLS: That's inue., hin sure you'l add it ater on. 


Head First: I'm sure our readers are wondering, since 
they're learning HTML in this book, if they need to go 
learn HTMLS instead? 


HTMLS: No! HTML is jus the next evolutionary чер, 
everything they've learned is exactly the same in HTMLS, 
HETMLS just айй» some new чый. In fact, we should sop. 
saying "HTMLS." I'm just the latest version of HTML, 
so call me HTML. Saying HTML at this point is just 
confusing, 


Head First: Wait, afier all the hype around HTMLS, are 
you really suggesting we do away with your name? 
HTMLS: Lam. You already know I'm a living standard 
and version numbers are dead, Well, I'm a living standard 
for HTML, not НТМІЗ, 


Head First: Gor it. Our readers really should just 
continue learning HTML5~—ubh sorry, HTML. and. 
everything they've earned so far has been relevant. Not to 
mention all the new stuff ahead that they'll be learning is 
the latest and greatest HTML technology: 


HTMLS: Exactly. 


Head First: I have w ask, though, I heard some of your 
new stu is for building web apps. How does that relate? 


HTMLS: The biggest thing is that I'm not jus for making 
web pags anymore; I'm designed for making full-blown 
web applications, 

Head First: Whars the diference? 


HTMLS: Web pages are mostly static pages. You'll have 
some images and a bunch of links, and a few nice effects 
here and there, Ше on the menus, but for the most part 
pages are for ending. Web applications, on the other 
hand, are for interacting with, ding stuff with. Like the 
applications on your desktop, only with web applications, 
you're doing ull on the Web, 


Head First: Can you give me an example? 


 HTMLS: Social media apps, mapping apps, games, ihe. 
Tit is endless. 


Head First: We couldn’ do that stu before HTML5? 
HTMLS: Wall you could do some of it, but a lot of the 
features required to build those Kinds of applications are 
being standardized for the first time with me. Before, if 
they existed at all they were somewhat haphazard, 
Head First: 1 don't think we're going to be building any 
apps in this book, though. 

HTMLS: No, but check out Had First HTMLS 
Programming That book is all about building web 
applications with me! 


Head First: We will! Thanks for being here, HTML. 
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howto validate your html 


Okay, that wasn't bad; now 

were telling the browser Сү Jim: Yeah, really cay But also 

were standard HTML. ıa line anticlimactic...we put this 
doctype at the top of our fle to tell 


Okay is that it, then? Are we now writing 
industry standard HTML? 


Frankes As far as I know; but this is where it gets 
interesting The one thing that can trip us up now 
is errors we might have introduced into the page. Say 
we forgot closing tag? Or had a typo in а tag name? 


Jim: Oh right, well, wouldn't we know ir if we did? 


Frank: Not necessarily: the browser is pretty good at 
winging it when it sees errors 


ow about i get the guys together, and we do a review 
of the entre pag 


Frank: You may not need по. ћете are tools out there ta help validate 
the page 


im Validate? 


Franke: Right, to go through the page and make sure all the markup is 
valid, Make sure we're keeping to the standard. Isa bit ike a spell checker 
for HTML, 


Jim: Sounds like а good idea, Where do we get these tools? 
Frank: The standards guys over at the WSC have a validator, and it's free 


Jim: Great let's do it 


standards and эй that jazz 


Meet the W36 validator 


Lets check out the W3C validator and have it validate our 
lounge files. To follow along, just point your browser to 
http://validator as. org 


WAC debe u leaked at te игд 


The 


ане Tq 
HTML: | 


p ay Fi — 
D it your page is on the Web iod by Fle Upon bee 
then you tan ype in the URL- pm 

Verc nd ck the Check button e 


ard the servite will relieve or — 
HTML ard thetk it. жөө 


More Optone 


(2) You tam choose the setond 
‘ab, and lend a Fle From yor ere tr ier iy 
computer. When you've selected 
the File, lick Cheek, and the 
browser wil upload the page for 
the serie to cheek 


(3) Ov, choose the third Had. Newt Does Hepa FA fee Conte 


tab, and сору and paste your Т sence nuna te WSC Markup Valor 12: 
HTML mte be form on wa enn 
ot Gb The dt di ӨӨ. йур MC BUN eue 


sod the зое ай. ... A NACCONDANKE тн OUR FUR 
Jor HTML — PRIVACY STATEMENTS 


= 
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validating the lounge 


Validating the Head First Lounge 


We're going to use the third tab, “Validate by Direct Input" ta validate 
the “lounge hii Ве That means we need to сору and paste the 
HTML from lounge lun into the form on that tab; keep following 
along and give it a пу... 


T c 


e ote or To of AOE МГП. 


We unn Ie om 


5 


Feel free to we 
" meted [D or 
Were wing method (3) here We elieked onthe "Validate by Diet: put" tab Dik Ws nore 
and pasted the tode for "lounge htm”, whith now has the doetype For HTMLS Scis 
Bf the ы, me e form Wet ready fr the bg vomer el De cro 


validate? Bets anyone? Click Check (and torn the Pago) to find ot. 
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Houston, we have a problem. 


"That red on the page can't be good. It doesn't look 
like the page validated. We'd better take a look, 


Marap Ya 


We fied the aS NEM 
dida Po RS 
HE locks Tie. E 
there is one 25 | 
pus p ЖЕ ren Lanes 
— C 
EMT OE LEES. 
— 
m 
— 
Sw 
вам р-а 


. 


‘The W3C is constantly 


revising the м: This doesn't lok bad. oo he 
«p Because the W3C frequently же have ko ase the alt attribute in 
Watch it! revises the vaiator you may the аыр element 


Pat seo ovact he same eor 

es No wonte just keep folowing 
"ene Because al tne stuf in ne next few 
Эрч important even you dont see 
tne error above: 
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the alt attribute te required 


Fixing that error 


‘Okay, this looks pretty simple to fix. You just need to add an 
alt attribute to your <img> elements in HTMLS, Go ahead 
and open "lounge humi, make the change, save, and then 
let's ry to validate again, 


<!doctype heal 
<html> 
<head> 
<title>iiead Firat Loungee/title» 
</head> 
<body> 
pu proved Head First Lcongee/Al» 
<img srom"arinka git" ЖШШЕ. Yon know the alt attribute 
E hore 
Join us any evening for refreshing 
<a href="elixir.html">elixira</a>, conversation 


id te the cm element 


Gr two of <em>Dance Dance mevolut 
їз always provided; Bros [Bring 
] 


maybe a gane 


your own web sei 
ч» 
ha>nirectlons</h2> 
P 
You'll find us right in the center of downtown 
Webville. те you 
<a href="directions html">detailed directionsé/a> 
Come join ша! 


ed help finding us, check out our 


</p> 
</body> 
<em> 


RAIN å 00, 
POWER 


Why do you think the alt attribute is required in HTMLS? 
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standards and эй that jazz 


We're almost there... 


Success! We have à green bar on the page; that must be good. But there are three 
warnings. That sounds like we ve stil got a few things to take care of Let's take a loole 


venil B. 
— 
ыен First шей йө ‘thers ән а few g 
— seg ee үү 
e aN | Take a leek 
SEAR arent, | 


— 9 | 


No worries hee is is a 
standard warning youl alaye 
set as long as the ade is 
considered to be experimental by 
the W3C бм told be for a 
pore 


Mes his looks lie a problem Самед, 
by leaving out some information about 
eor character encoding Well see what. 
ats about in a set. 


emm м ba jest saye Bak hey are gg 
DEED EE Regul E memi duele etel jer 

a с а 

a. 


K‏ و 


So, we've gota valid Ше in terms of how we've written the 
HTML, but it looks like we need 10 do something about our 
“character encoding " Let's take a look at what that means. 
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we need a character encodi 
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‘See, we're getting 
‘this warning message 
that the validator can't 
find a character encoding 


Ф һе Character encoding declared at document love! 


Noensescor encoding infomation was found wisn te document ohor л 
an HTML meta бетт or an XML declaration, I le опе recommended t» 
declare the charactar encoding in the document ise, espacial there is 
‘hance that he document ий be read rom or savad о disk, CD, ele. 


Frank: The character encoding tells the browser what kind of 
characters аге being used in the page. For instance, pages can be 
written using encodings for English, Chinese, Arabic, and lots of other 
types of characters 


Jim: What's so hard about figuring out how to display a character? If 
în the file, then the browser should display an “a”, Right? 


there's an 


Franke: Well, what if you're using Chinese in your pages? It’s an 
entirely different “alphabet” and it has a heck of a lot more than 26 
A-Z characters, 


Jim: Ol. Good рой... shouldn't the browser be able to tell the 
difference? Those other languages look nothing like English. 


Frank: No, the browser is just reading data. It can try to guess what 
kind of character encoding to use, but what if its wrong? This ean 

mot only to pages being displayed wrong, but also potential exploit 
from hackers, The character encoding takes the guesswork out of it 


Jim: We've lad the site up for a long time. Why is this an issue now? 


Frank: Because the validator is saying “Hey if Ten going to validate 
your page, you'd better tell me up front what characters you're going 
to use!” And think about it, we'd want to do that for the browsers out 
there anyway Dont stress, we just need to add one more line to our 
HTML, called а <meta> tag [should have thought of this sooner 


Jim: Got any other surprises for us? I really thought our web page 
would validate after we put the document type definition in our file 
Frank: 1 sure hope th 
‘ay in there and find out 


are no more surprises! Lets get the «neta: 
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Adding a <meta> tag to specify the character encoding 


Character encodings give us а way to represent all the letters, numbers and other symbols in our 
language on the computer. You might know of some of these encodings, like АБС or even Mone 
code, and there аге many other encodings out there. Luckily, the world has now standardized on 


the Unicode character encoding; With Unicode, we can represent all languages with or 


encoding But, given there are other encodings 
Unicode (or another encoding of your choice) 
<neta> tag in your HTML that looks like this 


ш wears WE The charset 
meta PON e де where 
geni eb we specify the 
ee 


tharaeter encoding 


[4 


duet the ite 


ype of 


и there, we still need to tell the browser we're using 
To specify Unicode for your web pages, you'll need a 


The vale of the 
hare attribute is 
Же type of character 
encoding we've wing 


a 


<meta charset="utf-8"> 


^ 


Jul like other 
HTML tags the 
ametas tag hèt 


A 


эңе. 


Dum! 


О: Doctypes, «тешә tags. ugh, do Ined to really do all tis 
to wite web pages? 


Spacing a doclype and charactar encoding wih a <meta> 
"a are Kind ol ike tares: you gotta do tha to be compat. Look 
айин way: you already understand Dum more han 98% of he 
"eh page wing population, which is great. Bu at he end ol he day, 
verano just puts the doctype and «meta» tag in ar HTML and 
‘aves on wilh Ие. So make sure you've got them in your HTML, and 
than ро do something much mar un. 


u 


2 Work wih us here. Is Ike WD-40; you dont wory about 
муз called that, you just use де wa зай, t (also writen 
somtimes as UTF- s рап of the Unicode encoding family. The u 
in utd means Unico. Unicode is a character sel supported across 
‘many commonly usd software applications and opealng systems: 
and ito encoding of choice lor the Web, because It 


of several 
we use For web pages 


there) are ne 
Jui D Questions 


-e и an encoding in the 
Unicode family of ertodings (ore 


ÉL" а he version 


supports ali languages, and muluingual documents documents 
that use more ап ono language) I's also compatbie wih ASCII, 
whlch was a common encoding fr English-oniy documents I you're 
Interested in laring more about Unicode or character encodings in 
general, check oul he потоп on character encoding at 

Php wh orglnermalanalO-charset him 


О; у ано өп <meta» tags that ok tke this: «meta http- 
sale Content Type cortan toit chara >, Do1 
dbo uso this instead sometimes? 


No. That is the format for the «mota» tag in HTML 4.01 and 
r. In HTMLS, you can just wile <meta charset > 


С); imis why you had us save our files using ut for h 
encoding way back i Chaple 17 


2 Yas. You want the encoding af the fle you're serving o the 
browser to match the encoding you specly nthe ema» tag. 
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using mota to specify a charset 


Making the validator (and more than a few 
browsers) happy with a <meta> tag. 


he <neta> tag belongs in the <head> element (remember that the <head> 
contains information alow your page). Go ahead and add the <meta> tag line right 
into your HTML. Let's first add it to the “ounge hum!" fle: 


Here's the <meta» tag We've 
Mldoctype htm» added it to the <head> element 
pem Shove the <title> element 


<head> 
<meta charset="utt-8"> 
<title>iiead First Loungee/title» 

<head> 

<body> 
p 


E) a Ма bis ine above ay cer 
neni inthe head det 


nd Improved Head First Loungee/hi» 
‘<img srce"drinke.gif" alt="Drinks"> 


any evening for refreshing 

'elixir.html'»slixirsefab, conversation and 

maybe a game or two of <am>Dance Dance Revolutione/am». 
з is always provided; BYOWS (Bring 

your own web server) 


Wireless 


You'll find us right in the center of down 


Webville. If you need help fi 


<a hrefe"directions.html">ictailed directicns</a>. 
Cone join из! 
</p> 
</body> 
<em> 


Want io place another bet? Is this going to validate? First, make the 
changes to your “lounge hmi" fle, save it, and reload it into your 
browser. Once again, yeu won't notice any change, but the hg will 
Now let's see if it validates. 
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standards and эй that jazz 


Third time’s the charm? 


‘This time, we picked the second tab (validate by fle upload}. You can choose whichever 
‘method works best for you. IF you want to try the upload method, then upload your 
“lounge hun!” HTML fle to the WSC validator web page at http: //validator „иЗ. ог. 
Once you've done that, click the Check button, 


—— 
WTMLS'I 
Love the green! 


We sil have one 
warning buk we don't 
weed fo worry abort it 
Gee below 


Success! We can tell the. 
boss we're writing totally 
industry standard HTML, and 
ме can even say we're ready 
for HTHLS, 


о 
в 


Tic унй е sime warning abut the 
Tat th weve wing эк "еее, 
servie? Nothing bo verry abont 


you aro here> — 241 
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тоге about validation and versions 


demwmen 
Dumb Questions 
О: revatio saye un oven mi What wetted ait about — 


dose that mean? 


А: пы message “Ung ona are: ims 
Caton Gtr a vat mea al P air 
Checking your ТМ. солу t те НТА. sana b cae 
e ST sar tn (ad shat naw ee ing 
эана, ва val prone û change, so re opel 
en oi ld your pag srt ett. at ean at a 
Crecente nope, fen уи bet rto sy up dal 
nte M aded an cac pages aia 


О: wnat have we really achieved in tis chapter? My page 
seli looks th same. 


А: tnts erapr we've кеней your page шуну so ath 
slit de HM исе. Vhat goat ha Tn coser 
Y te sp ere Шау wat you р оу etum 
it ma or poang англи өй ep 
Jau want atabe wlan sg ey Sandars, and ats at 
ess кш chaptar Py ара даи, sting a charactar 
‘sn and cang emp (heal п ML 


О: Why do we ned that att tribue anyway? 


А: ким grea reasons Ft yong kan or sone 
‘akon Gy он мөр gon dun a pur io 
talon eati i fon or) son he at 
‘asp pic ap Scr nate 
‘lr rg eet пади ida page, a ашп 
тагай ат t be es sneha hom nnd 
ee tt. 


О: watt at te browser tm using нты, and I not? 


The browser wil furo out that you ra not realy wring HTMLS 
and use he error handing capabilites it has to try à do the right 
‘thing. And hon you're back to me problem of having ha various 
browsers handle your рада in diferent ways. The only way you can. 
el predictable гыш ll he browser youre using НТА. and 
"o actualy do so, propery. 
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агаг. is there any difference between the HTML ете writing 
and HTMLS? 


Д: viera ung nia wis KTS Nou HLS 
ited same eu тали (licn uel be stg soon tn) 
dest upa k PIRO адейи, her re 
лр bs ak) TS TL and eying ave 
been ing HS отра t jor amos, but 
tong nad eventing pa HIA. ташар al De ew etn 
rrt iy te TMS chaton 


The good news ls that everything youve learned is ali read lor. 
HTML, and in fact you see how ite you actually had to do lo go 
from an “normal HTML" page ıo a professional HTML page. That 
вай, you might want to lel our bos you're already using HTMLS 
just or bonus points ward your nex raise. 


О); Whats the big deal with HTHLS compared to HTML аот 
anat 


Д: met вы aut HTL tron a here aro some 
. 
‘Sec вата) ad chon Ft i you abet agen 

— — 


Second, thara are many new fears hat allow web developers 
lo create web applications wih HTHLS Web appicalons are web 
pages hat behave mare ike appicalons (ike he ones youre used 
lo using on your laptop or mobile device an stabe wed pages. I 
youre intarasted in creating we appicalons, then ater youre al 
dona wih ths book (cue shameless plug), you should checkout 
Head First HTMLS Programming (OReilly. 


Finaly, the HTHLS spacfcaton is а lot more robust than the 
specications far the previous versions of HTML. Remember how we 
sad that he рвобсабоп з пон documenting common eros at 
web developers make? And helping browsers to know how to handle 
those errs? That means that web pages wih errors on them dont 
cause the havoc they used to, which В a good hing for users- 


‘Alina, HTMLS в a big improvement over HTML 4.01, and well 
чой ening, Wel get you up to speed quickly over те next few 
chapters. 
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Your шт. Add the «meta» tag to "directions html and eber him" Try validating 
them; do they validate? If not, fix them so that they do. 


Exercise 


validating experience! А 


Time to play a litle game with the validator. Таке the code you just successfully 
validated as HTMLS (on page 241), and remove ће doctype. Thats right—remove it, 
ide just to see what happens when you validate. Go ahead and submit this version of the 
Exancise im vaieta ard soo кыл happens. Mabe netes beaut eat aug 


stdoctypetimi> Q Remove the d 
<html> 
<head> 
meta charsete"utf-8» 
<title>iead Firs: Loungee/title» 


</head> 
<body> 
p а Improved Head First LoungeefRi» 
img sres"drinks gif” alts"Drinks"> 
E 
Join us any evening for refreshing 
<a һгег= lixiree/a», conversation and 
maybe а game ог twa of <embDance Dance Revoluticné/em>. 
esa is always provided; BYONS (Bring 
t in the center of downtown 
1f you need help finding us, check out our 
<a hrefa"directions.html">dets 
kell you about the type of 
Your nekes here. How many Л What does this tell yon abort the Heer 
werde geg Л Жы HTML iF yos dor t include ә doti 
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tips for good himi 


Calling all HTML professionals, grab the handbook... 


Welcome to the elite set of HTML crafters, those who know how to create profesional 
pages. There's а lot to remember, so the City of Webville prepared а handy guide to creating. 
industry standard pages. This guide is meant for yousomeone who is new to Webville, It 
jan’ an exhaustive reference, but rather focuses оп the more important best practices in 
Duilding your pages. And you'll definitely be adding to dhe knowledge in this guide as you get 
to know your way around Webwille in coming chapters, But for now, take one—ihcy te FREE 
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Webville Guide to HTML 


In this handy guide, we've boiled down writing well-formed HTML pages 
into а common sense set of guidelines. Check them out: 


Т 
9 
® 
ei 


Always begin with tho <doctype>. 
‘Always start each page with a doctype. This will 
get you of on the right foot with browsers, and 
with the validator too. 

Use <!docytype html» at ай times, unless 
you really are writing HTML 4.01 or XHTML. 


‘The <htm1> element: don’t leave home without it. 
Following the doctype, the <htm1> element must 
always be the top, or root, element of your web. 

page. So, after the doctype, the <html> tag will 

start your page and the </htm1> tag should end it, 
with everything else in your page nested inside. 


Remember to use both your <head> and your 
<body> for better HTML. 

Only the <head> and <body> elements can go 
directly inside your chem» element. This means 
that every other element must go either inside tne 
<head> or the <body> element, No exceptions! 


Food your <head> the right character encoding. 
Include а «meta charset-"utf-8"» lag in your 
<head>. The browser will thank you, and so will 

your users when they te reading comments on your 
blog from users around the world 


standards 
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the fine points of hem! 
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Webville Guide to HTML, continued 


In this handy guide, we've boiled down writing well-formed HTML pages 
into a common sense set of guidelines. Check them out: 


== What's а <head> without a «title»? 

m Always give your <head> element a <tit1e> 
element. Its the law, Failure to do so wil result in 
HTML that isnt compliant. The <head> element 
is the only place you should put your «title», 


«mota», and «style» elements. 

Be careful about nesting certain elements. 
Within the guidelines we've provided here, the 
nesting rules are fairly flexible. But there are a couple 
of cases that don't make sense, Never nest an <a> 
element inside another <a> element because that 
would be too confusing for our visitors. Also, void 


elements like <img> provide no way to nest other 
inline elements within them, 


Check your attributes! 
д ‘Some element attributes are required, and some аге 


p>» 


optional. For instance, the <img> element wouldn't 
make much sense without a src attribute, and now 
You know the alt attribute is required too. Get familiar 
with the required and optional attributes of each 
element as you leam it 


¢ 


standards and эй that j: 


Throughout this book you've been using elements and attributes that are all part 
of the current HTML standard. So, you haven't had much opportunity to see the 
phased-out elements and attributes. Most of those elements actually got phased 
Outin HTML 4.01, but they may stil be hanging around in old web pages, so it 
doesn't hurt to know a litle about these legacy elements. We did some digging 
and found an HTML 3.2 page that contains some elements and attributes that are 
по longer part of the standard, as wel аз a couple of common mistakes that are 
mot recommended in modem HTML. 


РИСКИН «Илла Here are some ба that 


ne س‎ s, 
Fesser sid 
i CAT ilo ol be by tet 


<body bgcolore"tan" texte" black's 


E 
<font. deere, 
Stay inside if you can 

ee 2 ith the 

Fant changes were made with 
E oro element. and is face atbribet 


eport says lots of rain and wind in store for 
1llee/font» today, зо be sure 


E 
Mli»Tuesday: Rain and 60 degrees. <— You coud get away without some 
<Li>wednesday: Rain and 62 degrees. 227 tios tags lke </i> and </> 

чш» Yor sometimes 3 є 

vot retommendedll 

<p ажет» E Misting quotes around attribute valves. 

Quotes are alaye retommended now and 
venired for attributes with multiple ales 


"dd Bring your umbrella 
<center><font sizes'small'»This page brought to you buy Lou's 


\ Diner, a Webville institution for over 50 years. 
biene center, . 
there мее tv wap to ain with the ы element 

обр text i alos a parasaph vira De sine attribute 
</html> e center fett of ied : 
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test your kno ОЛ 


BE the Validator 
Below, you'll find an HTML Ble. Your 
job is to play like you're the validator 
and locate ALL the errors. 
‘you've done the exercise, look at the 
end of the chapter to see if you caught 
them all. 


Use the validator to Chet 
rar werk once youre боле 


ler ik ү» need hint 


кеса 


<img arce"chanberofcommerce.gif*» 
ige for Enjoying Your Viait in Webville 
<p> 

</p> 


your stay in Webville. 


<a hrefa"http://wickedlyamart .com"><em>i 


t</en>c/a>. 
lace, juat 


everything will be fine 
</em></p> 

</body> 

</html> 
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standards эл 


Getting our HTML 
р to snuff wasn't too hard, but it 
sure took awhile to Figure it all out, 
‘And row we've got to style these 
pages with CSS, That's a whole 
different language, isn't it? 


S ШЕТ POINTS 


HTMLS is the curent HTML standard. 


‘© The Worid Wide Web Consortum (W3C) is 
the standards organization that defines what 
standard HTML В. 

. The document type definition (doctype) s used 
чо tell the browser the version of HTML youre. 
using 

. The HTML standard is now a ving standard 
Which means that he standard will change to 
incorporate new features and updates. 

^ The <meta> tag in the <head> element telis the 
browser additional information about a web page, 
such as the content type and character encoding 

= The charset attibute af the «meta» tag tells the 
browser he character encoding that is used for 
Же web page. 


Most web pages use ће uf encoding for HTML 
без, and for he «meta» tag charset айл. 


The al attribute is required for the <img> 
element. 


The WAC validator а free anine servic that 
checks pages for compliance with standards 


Use the validator to ensure that your HTML is 
жей formed and that your elements and attributes 
meet he standard. 


Ву adhering to the standard, your pages wil 
display more quickly and wih fewer display 
differences between browsers, and your CSS wil 
work better. 
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are you awak 


HTMLeross 


$ 


Jrs been a heck of a chapter. Go ahead and grab a cup of your favorite beverage, sit 


back, and strengthen those neural connections by doing this crossword. All the answers 


come fram the chapter. 


Across 
1. Victim of the browser wars. 
4. The HTML standard is a standard 


6, Required in the <head> element. 

8. Web standards makers have promised future 
HTML wil be compatible with older HTML. 
10, The boss wanted to standardize before adding 
to the Lounge pages. 

TI. When your HTML meets the standard, itis this. 
14. Definition that tls the browser and validator 
what kind of document you're creating. 


Down 

1. Standards organization that supplies the 
validator. 

2. Microsoft versus Netscape. 

3. <img> attribute required in standard HTML. 
5. This service will check your HTML for 
compliance with the standard. 

7. The older were much more complicated 
compared to the newest one. 

9. Where you put information about the page. 
12. Where you put web page content 

13. The most common encoding for web pages. 


standards and эй that jaz 


the Validator 
ES elution 


is to play like 
з: a 


Maing бее locate ALL the errors. 
L Here's the solution. 
hold be 7-8" instead of 
p (- Geh doesn’t exist!) 
pod 
title dedi be 
meta йин н e дш, 
меч 
pom 


— <—— Ne te 


selbs for Enjoying You 
E 

Here are а feu tips to help you better enjoy your 
</p> 
<u> 


Missing «АМ tag, This wil cause 
problems with Be <p> element below 


за Webville ^ 


sit in Webville gw 


esa in layers and keep an 

d and body.</14> 

4li»cet plenty of rest while you're here, sleep helps all 
those rules sink in.</14> 


Mli»pon't miss the Work of cur local artists right downtown 
gallery. <— Mising </li> tay, This wil sill validate, 
E et s not vetommended! 


bebe </p> ak doen't nat a p> 


Having problems You can always find 

<a hrefa"http://wickediysmart com"><en>iti cksdlysr 
Still got problems? Relax, Webvile'a a friend 
for help. And, as a lo 

</p> 

<em> А 
Don't worry. As long as you hit that wire with the 

ly Sangh the instant the ligh 

everything will be fine. 
</ea></p> 

</body> 

</html> 


ue 
place, just ask someone 


<em> and <p> tage ave switched. 
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ag HTML cross Solution 


эе вр ЕУЕ1 ОРЕВ 


зш 
a O a 
w LIVING 
E HB D 
E L 
П nnn 
w b 
"BACKWARDS н 
R т Е 
tss c O M Lr AN 
R b 
Ы е 
d Oo c r 
D 
y E 


amev<490 


Your tun. Add the strict doctype and the «mela» tag to 
“directions him" and "lir hun Try validating them —do 


they чиде? ro с еп зо at ey d 
| e лр ш er ata рай 


alt attribute to each of your «img» elements. 
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standards and эй that jaz: 


Time to play а Ийе game with the validator. Таке the code you just successfully 

validated as HTMLS (on page 241), and remove the doctype. Thats right—rermove it, 
ExeRci$e just lo see what happens when you validate. Go ahead and submit this version of the 

flet he validator and see what happens. Make notes below about the errors you gt 


еы Remove the doctype! 
шшш» == 


. Firs: Loungee/title» 
</head> 


ta the New and Improved Head Firat Lounged/Al» 
Ming srce"drinke.gif" alte"Drinks"> 
E 

Join us any evening for refrashin 


<a hrefe"elixir.html">+1ixirs</a>, conversation and 
maybe а game or two of <embDance Dance Reveluticn</am>, 
Mizelesa access is alvaya provided; BYONS (Brin: 
your own web server) 

</p> 

hani sect ions</h2> 

> 


You'll find us right in the center of downtown 
Webville, If you need help finding us, check out our 
<a hrefa"directions.html">detailed directions</a>. 


обу» 
Hees te get three errors and four warnings if we try to validate without 
De doctype. The validator assumes we've writing HTML 401 
Transitional hich was a version of HTML 4:0] designed to ме while 
yor were “transitioning” to XHTML). The validator realy doesn't like 
that there's no doctype, and complains a couple of times about that: 

Ik also complains about the <meta charset="ytf-0">, because before 
HTHLS, charset vas not а valid attribute of the <neta> tag, You can 
get the idea that vin ә дебут makes both the validator, and the 
browsers, happier campers 


Your notes here. How many 
errors did yos get? A 


you are hes, 2838 


www it-ebooks.info 


www d boobs ire 


7 getting started with CSS 


K+ 
* Adding a Little Style 


Don't get me wrong, the. 
hair, the hat-it all looks great, — 
But don't you think he'd like it if 4 

you spent a little more time adding 

‘some style to your HTML? 


Iwas told there'd be CSS in this book. so far you've been 
concentrating on learning HTML to create the structure of your web pages. But as 
you can seo, the browser's idea of style leaves a ot to bo desired. Sure, we could 
call the fashion police, but wa don't need ta. With CSS, you're going to completely 
control the presentation of your pages, often without aven changing your HTML. 
Could it really bo so easy? Wel, you aro going о have to leam a new language: 

after all, Webvil is а bilingual town. Aler reading this chapter's guide to leaming the 
language of CSS, you're going to be abla to stand on either side of Main Street and 
hold a conversation. 
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Remenber the Wizard of O2? Wel, this 
is dye park of the bok where things 
tp from black and white to talor: 


== 


You're not in Kansas anymore pme 
Breen Tea Coote 


You've been a good sport learning about markup. | 
and structure and validation and proper syntax and 

nesting and compliance, but now you get to really 
star acing some fin by styling your pages. But no 
worries, all those HTML push-ups you've been daing 
aren't going to waste. In fact, you're going to see that 
a solid understanding of HTML is crucial to learning 
{and using) CSS. And learning CSS is just what we're 
кой to do over the next several chapters. 


Jost to tease you a bit, on these two pages we've 
sprinkled a few of the designs you're going to work 
with in the rest of the book. Quite а difference from 
the pages you've been creating so far, isn't i? So, 
what do you need tn do to create them? Learn the 
language of CSS, of cours. 


Let's get started... 


Chapter 7 
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getting started with ess 


— оета 


— 
EE ы 


ан seem NEE 
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the ese language 


Overheard on Webville’s “Trading Spaces” 


Not up on the latest reality TV? No problem, here’ a recap: take wo 
neighbors, to homes, and $1,000. The мо neighbors switch homes, and 
using the $1,000, totally redesign а room or two in 48 hours, Le’ listen in, 


Okay, let's get some design in this place. 


bedroom { 
drapes: blue; 
carpet: wool shag; 


OF course in the Webville edition of the show; everyone talks about 
design in CSS, If you're having trouble understanding them, here's а lile 
translation tip: each statement in CSS consists of a location (ike bedroom, 
а property in hat location (like drapes or carpet and a style to apply 10 
that property (ike the color blue, ог | inch tes 


2 
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Using CSS with HTML 


We're sure CSS has a bright future in the home design category but let's 
get back to HTML. HTML doesn't have rooms, but it does have elements, 
and those elements are going to be the locations that we're styling Want to 
paint the walls of your <p> elements red? No problem; only paragraphs 
don't have walls, so youre going to have to settle for the paragraphs 
background-color property instead. Here's how you do that: 


a fet thing үө doi lett the 
TORT icin Bin ene De Fah the merely yew 
dert ше ge nk hm the ee te oe 
poride {he rame ert boy nd color 


7 moe 

Y Njord ee ied 
— 

y i INT 


2 temitolon. 
There's a colon in between 


Place all he styles the property and is че 


for the <p> cement in 
кее Û ba 
We Cl e whale 
tir a RULE 
Yon coll alao write the ue ike thi 


р ( background-color: red; } 
Here, all we've done is remove the linebreaks, As with HTML, you can format 


your CSS preity much as you like. For longer rules, you'll usually want to add 
some lincbreaks and indenting to make the CSS more readable (for you) 


Wanna add wore style? 


You can add as many properties and values as you like in each 
wanted to put a border around your paragraphs, too. Here's how you do that: 


m M qe have to de is add 
و‎ Se ا ا کے‎ oA d 
border: зри solid grayi 
A ES 
те denn wil 
> denent iod 
have à border. Wr 


ek, solid, and aray: 
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more about css and him! 


thorepmre ne | 
Dumb Questions 


Does every <p> element have the same 
style? Or en say, make two paragraphs diferent 
colors? 


. 
пата bt CSS ie y xe. Lem 
. ош dr, ке 
о lat elas vr set ran 
Yor se orto nae rayon to sow cous 
— cap 


О: How do атон what properties | can seton 
andieneat? 


Wal, here are lols of properties that can be 
saton elements, certainly more ап you'd want to 
патоло in агу case. You're going to get quite 
falar with he more commen properties п the nent 
{ow chapters. Youll probably also want lo байа good 
CSS reference. nero are plenty of references enn, 
and ORellys CSS Росйы! Referance isa great itte 
book 


О: Remind me why tm defining al this style lo 
a separate language, rather than in HTL Since 
the elements are writen in HTML, woulé tbe. 
asiar jast to wie зуе in HTML, too? 


Д: voira going o sar sne some sage 
toting CSS wie radon chasers Ва rosa 
аник. CSS attr sts relig 
datori tan Unga mat 
CSS y can cata rge elects aye 
“ш HIN Ya aso gong na SS 
Paien baner ay hard Sas rl poo 
{out snow awa — 
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SERAI 
eee 


Say you have an <em> element 
inside a paragraph. If you change the 
background color of the paragraph, do 
you think you also have to change the 
background of the <em> element so it 
matches the background color of the 
paragraph? 
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Getting CSS into your HTML 


Yon know a litle about CSS syntax пом; You know how а select an element and then 
write а rule with properties and values inside it. But you still need to get this CSS into 
some HTML. First, we need some HTML to put it in. In the пех few chapters, we're 
going to revisit our old friends Starbuzz, and Tony and his Segway journal ad 
make things a litle more stylish. But who do you think is dying to have their site styled 
first? OF course, the Head First Lounge guys. So, here's the HTML for the Head First 
Lounge main page. Remember, in the last chapter we fixed things up a itle and made 
it proper HTML (would you have expected any les of us? Now; we're adding some 
ste tags, the easiest way to get style into your pages. 


But not necessarily the 
best way Well come 
bak to this later in 
Be chapter эм 


eller vay 
<!doctype зыш» 
pss 
pu 
“neta charset="utf-8°> 
tel. sg First Loungee/esene> 
Here's what weve interested in De able det 


gene томас style dne үм HTML ad 


p сё CT a a e kee. 
</style> 
э Ard your CSS veles are going 


</head> te ge right in here 
<body> 
‹э1>ие1сове to the Head First lounge chi 
<> 
‘<img sre="images/drinks gif" alte"Drinks"> 
</p> 
<> 


Join us any evening for refreshing 
<a hrefe"beverages/elixir.html">elixirs</a>, 
Лол and maybe а game or tuo of 
<ельпапсе Dance Revoluticn</em>. 
Wireless access ia always provided; 
втонз (Bring your own web server) 
ч» 
<h2>Directions</h2> 
> 
You'll find us right in the center of downtown 
Webville. Tf you need help finding us, check out our 
<a hrefa"about/directions.htnl"»ietailed directicns</a> 
me join us! 
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adding style to the lounge 


Adding style to the lounge 


Now that you've got the <style> eleme 


їп your HTML, you're going to add some syle 
to the lounge to get а fel for writing CSS. This design probably won't win you any “design 
awards,” but you gotta start somewhere. 


be first thing we're going ta do is change the color (something to match those red lounge 
couches) of the text in the paragraphs, To do that, we'll use the CSS cole property like this: 


<!ростурЕ hal» 
<html Lange"en"> 
<head> 
<meta charset="ute-2°> 
<title>iiead First Loungee/title» 
<style> 


lere's the vele that 
Herds there The property, to change te Font talor i 


ia going to spesif, , ата 
ae Бор: 
the <p> element to — * te 


See i4 AT, etm 


</head> 
<body> 
hl»Helcome to the Head First Lounged/Ml» 
E The ре 
ing arce"inages/drinks.gif" alt="Drinks"> 
</p> 
P 
Join us any evening for refreshing 
<a hrefe"beverages/elixir.html">elixirs</a>, 
sation and maybe а game or two of 
es Dance revolut ionc/em>. 
Wireless access in always provided; 
BYOWS [Bring your cwn web server] 
</p> 
<h2>Directions</h2> 
<> 
You'll find us right 
Webvilla. If you need help finding us, check out our 
<a hrefa"ahout/directions html">detailed directions</a> 
Cone join ust 
</p> 
</body> 
«Inti» 


the center of downtown 
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Cruising with style: the test drive 


Go ahead and make all the changes ftom the last couple of pages 
to your “lounge h е in the "chapter /lounge" folder, save, 
and reload the page in your browser. You'll sce that the paragraph 
text color has changed to maroon: 


Welcome to the Head First Lounge 


V r nN Бетін да ви it 
hal te be beans 

all ve selected tose 

. € 2 | weve the <P elemente 


heres ar „>| Speer bon Ws pr HON ne 


Ta N Directions 
tet You? fad ws ght бе center of dowmowa Webville IF sce wed heip fir 
З eee N 


wr 


Notite that the tolar 
of the Inks didn't 
hange. Keep that in 
the back of Your mind. 


— OBRAN 
es 
Instead of seting the color, what f you set background-color of 


the <p> elements to maroon instead? How would it change the 
way the browser displays the page? 
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styling headings 


How about a different 
font for the lounge headings? 
Make them really stand out 
Tm seeing big, clean, grey. 


Style the heading 


Now let's give those headings some style. How about changing the 
font abit? Let's change both the type of font, and also the color of 
the heading font 


д the rae o select $ 
ү E AT eb эй dank d 
font-family: sweet; Ob b. 
„ eet ad he font 
taion t syay WEN tak a 
[aix tek nove dea Fonts later: 
font-family: sans-serif 
ШИ X uuu. 
de the crat аме Dog to 
p Be 0 clement 
m 
, 


Actually because these rules are xac the same, we 
can combine them, like this: 


To write a rule for mare than one 
К шиш pot commas between 


element jst 


LE belles Wee “W, W3 
font-family: sans-serif; „= 
color: gray: 

D 

Pt 


color: maroon; 


Test drive... 


Add this new CSS to your "lounge br 
and reload. You'll see that with one rule, you've 
selected both the <31> and ch» headings 


Both of the headings © 
cn the page are now 


hed Geka samen A> omen. 


font and colored gray . 
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Let's put a line under the welcome message too 


Let's touch up the welcome heading a bit more. How about a line under it? That 
should set the main heading apart visually and add a nice touch. Here's the 
property we'll use to do that: 


border-bottom: 1px solid black, 


— 
This property controls ive yong to tyle Be 
e he border arn ed 


clement locks pie, sid black lime 


[opel 


"The trouble is, if we add this property and value tothe combined h1, h2 
rule in our CSS, we'll end up with borders оп both our headings: 


i 
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tere we've adding à property 
Са таай S be tlio border 
S аниа Tor both Ge <hl> and e 
1 — E dee. 
Pi 
— 
П 
IF we do this. Welcome to the Head First Lounge 
wet bottom borders a 
on bath ar heades Not —> | Ш 
ao Fre 
So, how can west the Hot order m—: 
оп just the chi» element, without س‎ a чы 


affecting the <Һ2> element? Do we have 
to split up the rules again? Turn the 
L 


Directions 


som sn Come 
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to find out Yez ma at ae шт шуша ena u yo ани tep mE 


you are here · 


265 


getting more sophisticated with selectors 


We have the technology: specifying a 
second rule, just for the «hl» 


We don't have to split up the nt, 152 rule, we just need to add another 
ale that is only for h1 and айа the border style to it 


The Fk rae stays the sane Were 


Е а aae 


font-family: sans-serif; For de tont- family and tolor for 


‚ == = beth chl> and 2> 
- A Batson whe ыбыз tod vale 
eee, 
= ere ee 
T 
color: өйөө 
] 


Another test drive.. S. 


Change your CSS and reload the page. Youll see that the new rule 
added a black border to the bottom of the main heading, which gives 
us a nice underline on the heading and really makes it stand out. 


Here's the ay 
bottom border 


in black LET zu 


find vo border Directions 

Кеја what . 

Еа: Re 
———— 
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there are no 
Dumb € Questions 


О: sohowdosstnat work мйепуш С) vats te advantage of tat 

have more than one rule for an element? approach? Init it beter to organize each 
Moment separately во you know exactly 

А: voucannaeasmany nos asyo hates thas? 


valor an dr Ea hoa oe 
yasni tendon Д: Nata fielen 
. эўседи any care, yo 


cmon styles between elements, ke we only have to change them in onan. you 
did with <ht> and <h2>,and then any siyle break them up, hen here are many rules 
"Ња is specilc o an element, you wre In you have lo change, which is error-prone. 
another rule, йе we d with e bordar- 

tom se for he main heading. 


So, how do selectors really work? 


You've seen how to sel 


t an element to style it, like this 


eel i the seketer 


=з к, The style is applied to the elements 
color: gray; © described by the dete this 
D il» elements 


Or how to select more than one element, like this 
Another selector. The style is applied to Ale and <hZ> 
$ elements 
[n 
color: gray 


+ 
Yo 
your styles are applied to. 
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О; лу do we use a bottom border to 
decine nto ue auntie 
Siye tor tent? 


боой question. Thera is an underine 
tf or text and we could use that instead. 
However, he two sles have зуу 
diferent обод on the pape: I you use 
‘border-bottom, then the ine wil extend lo he 
geo th page. An underina is опу shown 
under tha taxt itsel. The property to set text 
underina is called text-decoration and has а 
value of undetine” fr underined tent. Give 
Aa ly and check out he difernces 


going to see that CSS allows you to specify ай kinds of selectors that determine which elements 
noving how to use these selectors is the first step in mastering С 


and 


todo that you need to understand the organization of the HTML that you're styling, After all, how 
сап you select elements for styling if you don't have a good mental picture of what elements are in the 


HTML, and how they relate о one another? 
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So, let's get thar picture of the lounge HTML in your head, and then we'll dive back into selectors, 
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Like > 


e Markup Magnets 

СО | Remember drawing the hierarchy diagram of HTML elements in 
Chapter 37 Yue going to do that again for the Lounges main page 
Below, youll find ali the element magnets you need to complete the 
diagram. Using the Lounges HTML (on the right), compete the tree 
below Weve done а couple for you already. You find the answer in 
the back ofthe chapter, 
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<!doctype ма» The Head Fe 
pum Lex HTML 
<head> 


<meta charset="ute-B"> 
<titledtiead First Loungec/title» 
<style> 

T 


</style> 
</head> 
<body> 

<hi>welcone to the Head First Lounge</h1> 

ч» 

<img arcs"images/drinks.gif" alt="Drinks"> 
ч» 
<> 


</p> 
<ħ2>Directions</h2> 
<e> 


Webville. 1f you need help finding us, check out our 
<a hrafe"about/directions.htnl*»detailed di rections</a> 


ome join ua! 


</p> 
</body> 
«Inti» 
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visual selectors 


Seeing selectors visually We tan mly je 


Let's take some selectors and 


to the tree you just created. Here's how this “h1” the <head> element 
selector maps to the graph: ard everything under it 
Сеа] 


мү 
font-family: sans-serif; 


] 7 к 


М» clements inthe Page 
and there's nly one 


ana here's how the “h1, h2” selector looks: 


mona 
font-family: sans-serif; 


Now the slettor 
matches both l> 
24 Md» elements \ 


If wo use а “р” selector, here's how that looks: 


font-family: sans-serif; 


2 
та эйе matches all the 7 


EN 
e C) D) g g 


p teneris v 
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t.! 


DEM 


П 


font-family: sans-serif; 


DE 


П 


font-family: sans-serif. 
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‘The Case of Brute Force Versus Style 


When we last left RadWebDesign in Chapter 4, they had just 
blown the corporate demo and lost RobotsRUs's business, 
GorrectWebDesign was put in charge of the entire Robo RUs 
site and got to work getting everything nailed down before the 
site launch later in the mouth, But you'l abo remember that 
RadWebDesign decided to bone up on their HTML and CSS, 
They decided to rework the RobotsRUs site on their own, using 


Five-Minute proper HTML and stylesheets, jus to get some experience 
ө tinder their belt before they took on another consulting job- 


it happened again: RobotsRUs called CorrectWebDesig 
with an urgent message, "We're changing our corporate look 
and we need all the colors, backgrounds, and fonts changed on. 
our site.” At this point, the site consisted of almost LOO pages, зо 
Correct WebDesign responded that it would take them a few days 
to rework the ste. “We don't have a few days!” the CEO said 
Desperate, the CEO decided to call in RadWehDesign for help. 
“You fubbed up the demo last month, but we really need your help. 


Сап you help the CorzertWebDesign guys convert the ste over 10 
the new look and feel?" RadWebDesign said they could do better 
than that; in fact, they could deliver the entire site to them in less 
than an hour 


How did RadWebDesign go from disgrace to web page 
‘superheroes? What allowed them to change the look and. 


feel of 100 pages faster than a speeding bullet? 
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Uh, I think you forget 
to style the elixirs and 
directions pages? 


Getting the lounge style into the 
elixirs and directions pages 


їз great that we've added all this style to “lounge hen”, but what 
about "elisichiml" and “directions html"? They need to have a look 
that is consistent with the main page. Easy enough. just copy the style 
clement and all the rules into each file, righ? Nat so fast. Г you did that, 
then whenever you needed to change the style of the site, you'd have to 
change ey single fle—not what you want, But luckily, there is a beter 
way. Here's what you're going to do: 


Ө Tike the rutes in “tounge ht and pace 
them in a fle called lounge es 


Ө Creme an external link oth file fom 
your “lounge hin fe 


Ө Create the same external links in “йш” 
and “directions hm 


© Give al three fles a good test drive, 


you are here + 27 


www it-ebooksinto 


creating 2 ess file 


Creating the “lounge.css” file 


You're going to create а file called “оше: св” to contain the style rules 
for all your Head First Lounge pages To do that, create а new text file 
named lounge cc in your text editor 


8 
(le vo dee 
We often all CSS 

fles stylesheets 


Now type, or copy and paste from your “lounge html" fle, the CSS rules 
into the “lounge. fle. Delete the rules from your "lunghi" file 


while you're at it 


Not that you should not copy the <style> and </style> tags because 
y CSS, not HTML. 


the “lounges fe contains on 


ы, м 4 
font-family: sans 
color: gray: 


Vaur eene es! file 
Thou look Ike ths О, 
Remember, no <style> tass! 


mt 
border-bottom: 1px solid black; 
' 
Pt 
color: maroon; 
] 
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Linking from lounge. tu“ to the external stylesheet 


Now we need a way to tell the browser that it should style th 


page with the 
styles in the external stylesheet. We can do that with the HTML <1 Ln 
ML 


clement, Here's how you use the <142> element in your Н 
<!doctype һый> 
<html> 
‘<head> 
<meta charsete"utt-8"> 
<title>iead First Loungee/title» 
<link type="text/css" rel="stylesheet" hrafe"lounge.cas"»- 


Here's the HTML. that le 
do the extemal stylesheet 


SL Yo doi need the до dest 


npe job delete if 


тошде</ы> 


‘drinks. gif" alte"Drinks"> 


the sane 


„© HTML Up Close 


Let’ take a close look at the <1. nk> element since you haven't cen it before: 


The type of this nf 


ation и “teste! 


А 
e Wrk dene 


Use the nt Siral in oher words, a CSS stylesheet M of frd the stylesheet is located at 
ыч" WS pa би кн Dace а s We nth eee ag 
ен optional), but үө may see st an alder pages fe lnk, but it could be a 


\ 2 


<link type="text/cs 


rele"stylesheet” hrefehlounge.cs 
The vel attribute spetifies the relationship bebween the aie 
HTML Fe ard be hing yo bien Mere bug to 
ETE 


dinle i 2 wid element 
I hat e losing tag 
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Linking from "elixir.htwl" and directions. Html“ 
to the external stylesheet 


Now you're going to link the “clixichtl” and “directions html" files just 
as you did with "lounge html". The only thing you need to reme 

that elixir hun!" is in the "beverages" folder, and "directions hm 
‘about folder, so they both need to use he relative path *, /lounge cr 


So, all you need to da is add the following 13800 element to both files: 


<title>itead Firat Lounge Elleirsc/tiele> 
<link type="text/css” rel="stylesheet" hrefe"../lounge.css"> 

</head> 

<body> 


This а "eie html”. Jast add 


</body> 
poc 


-/1ounge.css"> 


N Same for “dvectins hb 


ml”. Add the clink һе here 
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Test driving the entire loungi 


Save each of these files and then open 
lounge html" with the browser, You should 
sce no changes in йө style, even though the 
styles are now coming from an external file. 
Now click on the “elixir” and “detailed 
directions” links. 

Wow? We have a whole new style for the 
Elixirs and Directions pages with only а onr- 
fine change to the HTML in each file! Now you 
can really see the power of CSS. 


Our Elixirs 


Green Tea Cooler 


Кое, 


Rasnberry Ice Concentration 


Welcome to the Head First Lounge 


СЕЈ 


era cen i. mec mene 
eee eee. 


cing бек) кат «илик gran cer ene u 
‘ord oe ep 


verry Bliss Elixir. 


Directions 


Youn ety ae een Ware yos rost eee, 
‘Stoo tinc Come na 


Directions 

Teresa Ave ate, 
ананан Sees Are N <o OD ai 
cee А one 


— 
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use ess for flexibility 


‘The Case of Brute Force Versus Style 


So, how did RadWehDesign become web page superheroes 
(Or maybe we should first ask how the "do no wrong" 
GorreetWebDesign firm fubbed things up this time? 
root of the problem was that GorreetWebDesign was creating 
the RobotsRUs pages using circa-1998 techniques. They 

were putting their style rules right in with their 


HTML (copying and pasting them cach time, 

Fise-Minute sad, even ie, they wor wing x ot ol oli 
HTML elements йе <font> and «center: 

Mystery that have now been deprecated (eliminated 


Sm TRI) Se he lone to ge 
chek a eta meon oie ey we 
page and aig едг йе CIS Woe, meat 
ab 
Sole Caspar etit wrote O dg ied 
.. ol prenan HTML deir 
Pages ad ey ved an tema let Thea To 
Phage eae he mice ie a d was 
„зз ыо» 
фе CSS wich diey cay da in ten тшу ey 
555 T 


diferent versions of the CSS ready for review before the site 
launch. Amazed, the RobotsRUs CEO not only promised 
RadWebDesign more business, but he also promised them. 
the first robot that comes olf the assembly line. 
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aes 


Now that you've got one external style file (or'stylesheet" use it to change all the 
paragraph fonts to "sans-serif" to match the headings. Remember, the property to 
change the font style is "font-family? and the value for sans-serif font is sans-serif 
Youll find the answer on the next page. 


Welcome to the Head First Lounge 


Ween 


The headings ме ger forks, 
which dort have serifs and wee (| 
very deam od 


Deme Dono [eS 
Directions | Our Elixirs 
жалам Oreen Tea Cooler 


“The paragraphs sill ме the 
default serif Fonts, which 
have serfs, and are often 
Considered more difficult to 
read on à tompoter sereen 


Reepberry es Concentration 


55 
1 | те зан 


shh | Cranberry Anti 
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understanding 


п your репой 
11 


Sun eee e мыш Remember te 


io match 


st add a font-family property 


font-family: sans-serif; AZ 


maroon; aragraph rule in the 


to your 
lange t Fle 


Tm wondering if that is really the best 
solution. Why are we specifying the font-family 
for EACH element? What if someone added a 
«blockquote» to the page—would we have to then 
add а rule for that too? Can't we just tell the 

whole page to be sans-serif? 
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It’s time to talk about your inheritance... 


Did you notice when you added the font-family 
property to your p selector that it abo affected the 
font family of the elements inside the <p> element? 
Let's take a closer look 


When you added the 
Font loni property te Your 
CSS ү selector, it ange 

the fant Family of your «р> 
deseris Bet А. av changed 
{he Font family ofthe buo Inks V 


— 


The elements inside the «p> element inherit the 
font-family style from <p> ГЕЯ 


rt йе you can ines your ис сук ot Баеп hae бон уне раля cements ean brio 
‘Ser ss Gom tc ares Ice, he co amd E аена е : 

derer een age бони the p> зеш, hich bel pet denen ae ea 

that ogi our peep ye wuld change le y the demesne agro, 
% ̃ us ery ie Nek o en 
clement in every paragraph in jour whole se. which would definitely be о NOT fn, error-prone ted 


rd metiri 
Let's take а look at the HTML tree to see how inheritance works 


(erst eem a | 


765 


К чё the font-family of al he «p meni 
Nesta al the deett Dal wold be affected 


of course, wold 

The ap clement : 
deed with the Font Fam 
be sty Yu 


The <a> ttn and e; 
elements in the buo 
paragraphs inherit the 
ТЫ from their 
arent elements, the 


The <img> element. <p> elements 


2 child of a paragraph, 

bot it dent have oy 
any tert, so e 
affected 
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‘moving rules fo the body element 


What if we move the font up the family tree? 


JE most elements inherit the fon: 


‘fani Ly property what if we move И up to 
the <body> element? That should have the elec of changing the font for all 
the <body> element's children, and children's children. 


the font-family 

to move the 

de- e paraya ard 
e body 


Wee goin 
property 


pan readings to the 


Now all (hese elements are ing 
(be herit the font-family 


== өйө, 


Remember, —> [ед] 

images de 

toe text 7 
Mom, бә һе. Singly by chang бе 


Font family property in the body vule, we 
oud change the font For an entire sike. 


What are you waiting for...give it a try 


Open your "lounge cs" fle and add a new rule that selects the <body> clement. 
"Then remove the font=fani 1y properties from the headings and paragraph 
rules, because you're not going to need them anymore. 

Here's what. you're ging to de 


‹ Fst, add à new vole Bak эбе» 

font-family: sans-serif; . Аш enert Then add e 
D Rari rote with a abe 
hl, h2 ( of замен) 

— — 

color: ray 
‚ 

Then take the font-family 

at property out of the W, h2 


border-bottom: 1px solid plack; | Les Hef Ni 
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Test drive your new CSS 


As usual, go ahead and make these changes in the “lounges” 
stylesheet save, and reload the "lounge html" page. You shouldn't 
expect any changes, because the style sche same. Is just coming 
from a different rule. But you should fee better about your CS! 

because now you can add new elements to your pages and they ll 


automatically inherit the sans-serif font 


Surprise, surprise, This doesn't lok any 
diferent a al ы. Dat is ech what we 
Were expecting an All you've done i move 
The santa fant up into e bob rae and 
let all te other elements mherit Bat 


—— 
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Welcome to the Head First Lounge 


FEE 


Directions 


ORA auis Some sna 


0 


Okay, so now that the whole site is set 
do sans-serif withthe body selector, what 
if wont one element to be a different 
font? Do T have to take the font-family 
oot of the body and add rules for every 

element separately agair? 
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when you don't want to inherit 


Overriding inheritance 


Dy moving the font-family property up into the body; you've set that 
font style for the entire page. But what if you don't want the anf 
font on every element? For instance, you could decide that you want <em> 
elements о use the serif font instead. 


Te ohn ret i 


ir De body vole, зо сөт 
mde tre body inherits Be 

ошер font-family property‏ کے 
From «bod‏ 


Е] 
P y Bot ymse desides у= want your ctn 


дее jo tav aent f 
instead You need te verde lie T 
8 


Well, then you can override the inheritance by supplying a 
specifie rule just for cen Here's how you add а rule for <em> 
tw override the font-family specified in the body: 


"T 
— sane 

‚ 

nay ma ¢ 
UN 

] 

"T 
border-bottom: 1px solid black; 

] 

T 

* и To override the БАА клен 

Ted ren body add a pew vie 

ae prion ex wath the font-family 
5 ее че sek to e. 

] 
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Test drive 


Add a rule for the <em> element to your CS 
‘amily property value of zeri f, and reload. 
your "lounge ml” page: 


with a 


Welcome to the Head First Lounge 


за 


Notice that the "Dante Dante 
Revolt eee tem ышы onem, 


tert which the ge 
ent the <em> dee ee 


pem font Directions 


ОРКЕСТРИН 


As a general rule, ics not a good idea to change 
fonts in the middle оГ а paragraph like this, во go 


ahead and change your С 
(without the em rul 


ton does mme browse know which 
al io spy cm» when n overriding 
The inerea value? 


А: wo css e most sposte nie 

i ainas usea. de I you have a nao or 
одо and a тов space mie о 
‘tenant gong оше ho rara еше 
ме. ek тош rto ou jo 
Ros ihr se rs uci 


О: How do iknow which css 
properties are inert and which are 
то? 


Ти s where а god reference realy 
‘comes in handy, Ike O de ng CSS Pochet 
Reference. ln general ай ol he styles Bat 
аба the way your text looks, such as font. 
cor (he color property), Ве onary, 

эв youve just seen, and oher bete 
properes such as fonksize, fn weight (lor 
bold taxt), and ony (for alies) ае 


back to the way it was 
‘when you're done testing. 


there are no 


Dumb Questions 


inherited. Other properties, such as border, 
же not herd, which makes sense, ngh? 
-Jst because you want a border on your 
“<body> element doesn't maan you want 
ол al your elements. Alot ol he mo, you 
can flow your common sense (or just ty 
itand see), and youl gel the hang of itas 
you become more familar wilh the various 
Properties and what they do. 


an | always override a property 


thal is being inherited when | don't want 
ie 


2 Yes. You can always usa a more 


welle selector lo override а property Fert 
aparent. 
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— — 


— 
Eu 
атана 


Yes. To write a commentin your 


CSS, just enclose It between and. For 
instance: 


/* this rule selects all 
paragraphs and colors then 
blue */ 


Nolce bata commen сап span multiple 
does. You can also put comments around 
CSS and browsers wil ignore kt, Ihe this: 


/* this rule will have no 
effect because it's ina 
P (color: blue; ) */ 
Make sure you dose your comments 

сотосу; thers, your CSS won! work! 
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you are here v 


styling individual paragr 


Iwas thinking it would be 

coal to have the text below 

each elixir match the color of 
‘the elixir. Can you do that? 


i We're not sure we agree with the 
aesthetics of that suggestion, but 
hey, you're the customs 


Can you style each of these paragraphs separately 
so that the color of the text matches the drink? The 
problem is that using а rule with a p selector appli 
syle to all <p> elements. So, how can you select these 
paragraphs individually? 


the 


That's where diues come in, Using bath HTML and 
CSS, we can define а class of elements, and then apply 
styles to any element that belongs to that clas. So, what 
exactly is a clas? Think of И like а club someone starts 
a “greentea” club, and by joining you agree to all the 
Fights and responsibilities of the club, like adhering to 
their style standards. Anyway; les just create the class 
and you'll see how it works, 


Creating a class takes two steps: first, we add the 
clement to the cass by adding a class attribute to the 
element in the HTML second, we select that class in 
the CSS, Lets step through that 


Gen A 


t —. 


Ble tet > 


Red tert че 
don't reed ы 
hinge tht ne У 
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Adding an element to the greentea class 


Open up the "cisichtri le and locate the "Green Tea Cooler” paragraph. 
‘This isthe text we want to change о green. All you're going to do is add the <p: 
clement toa class called greentea, Here's how you do that: 
<!DOCTYEE htmi> 
pes 
<head> 


<meta charset="ute-2°> 
<title>iiead First Lounge zlbiirseftitle» 
<link type="text/css" rel="stylesheet" href=". ./lounge.css"> 
<head> 


To add an element to a elas, 
"m the attribute "clase" aleng wth the 
. rae of бе elass, Ше "greentea" 


тез Cooler</ha> 
<p classe"'greentea"> 

<img src=". ./imagès/green. jpg" alte'Green Tea"> 

jock full of vitamins and minerals, this elixir 


combines the healthful benefits of g 
a twist of chamomile blossoms and gi 
ч» 
«М2>вазрьегту Tce Concentrationt/h2> 
E 
<img src=". ./images/lightblue. jpg" alte"Raspherry Ice". 
Combining raspberry juice with lemon grass, 
citrus peel and rosehips, thia Ley drink 
Mill make your mind feel clear and crisp. 
</p> 
<ho>Blucberzy Bliss Elixir</h2> 
E 
<img sres"../images/blue.jpg" alte"Blueberry Blis 
Blucherries and cherry essence mixed inte a hase 
of elderflower herb tea will put you in a relaxe 
atate of bliss in no time 
</p> 
<h2>Cranberzy Antioxidant Blast</n2> 
<p> 
‘<img sro="../images/red. jpg" alt="Cranberry Blast"> 
Wake up to the flavors of cri id hibiscus 
in this vitamin C ri 
</p> 
</body> 
<em> 


Now that the green tea paragraph belong to the gres 
provide some rules o style that cla 


ез class, you just need to 
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Creating a class selector 


"To create а class in CSS and select an element in that class, you write a 
s selector, like this: 


Then ve a! to 


Leiche 
ec e., batt th 

саа be 2 

eee P.greentea { иы here 

we bd her elei 

2 1 color: green; e, 

emo f ) in the rentea clas the 
pts 


The decr Greentea 
selects al roo к 
бе greentea das 


So now you have a way of selecting «p» elements that belong to a certain class to 
style them. All you need to do is add the class attribute to any <p> elements you 
want to be green, and this rule will be applied. Give it a try: open your "lounge.css" 
file and add the p greentea class selector to i. 


body ( 
font-family: sans-serif; 
+ 
ы, b { 
color: gray: 
П 
ru 
border-bottom: 1px solid black; 
П 
Pt 
color: maroon; 
П 


p.greentes ( 
color: green; 
) 
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A greentea test drive 


Save and then reload to give your new dus a test drive. 


Herds the new gerte 
ela el to the 

paragraph Now the fort 
een and matches the 
reen Tea Coder Maybe 
а cog vao ch а 
bad шә after al 


your pev 
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Green Tes Cooler 


Raspberry се Concentration 


Cranberry Antioxidant Blast 


EM IA 


Your turn: add two classes “raspberry” and ‘blueberry? to the correct 
paragraphs in "ейи html and then write the styles ta color the text blue and 


purple, respectively. The property value for raspberry is "blue" and for blueberry 
is*purple: Put these at the bottom of your CSS fle, under the greentea rule: 
raspberry first, and then blueberry. 


$ 


Vesh, ve know evt probably hiking, how 
tan a raspberry be blue? well iF Raspberry 

Vd Md Ue, that’s good enough for wt 

Ard seriously, when you blend ur a bwch of 

blueberries, they really are wore purple than 
Mee Werk with us here 
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dealing with class solectors 


Taking classes further. 


‘You've already written one rule that wes the greentea class to change апу 
paragraph in the class to the color “green' 


But what if you wanted todo the same to all cblockquote>s? 
Then you could do this: 


Bisckquote.greentea, p.greentem ( а add another е te handle 
color! green’ Кун the greentea 
] Y= lass Now is vele ый apply <p> 


and <bloequote> elements in the 
And in your HTML you'd write: M : 


greentea eas. 


blockquote cis 


‘greentea"> 


So what if T want te 

‘add «hb, «ho», «h3», «p», and 

«blockquote to the greentea 

class? Do I have to write one 
huge selector? 


Ко, there's a better way: If you want all 
elements that are in the greentea elas to 
have a style, then you can just write your 


< rule like tis 


greanta ( 
color: green; 


and jk ме 3 period Followed by a elas 
same, then the rule will apply bo al 
members of he he 
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Cool Yes, that works. One 
more question. you said being in 
а class is like being in а club, Well, 
Icon join many clubs, So, can an 
element be in more than one class? 


getting started with ess 


Yes, elements can be in more than one class. 


И easy to put an element into more than one class, Say 


yuuwantiospecy a cp» clement tht isin the qreentea, . 
raspberry, and blueberry clases Here's how you would Pate ger t 
tio dat inthe opening ng rame nts e 
سے‎ e ot e thas 
. К 1 Ov 
Чак Tw ordering 


d matter 
deen matt 


So, for example, I 
could put on chi into my "products" 
class that defines a font size ond 


weight, and also a "specials" class ° 
to change its color to red when 
‘something's on sale? 
Exactly, Use multiple classes when you want 
an element to have styles you've defined in 
different classes, In this ease, all your < 
етеп associated with products have а ®. 


certain style, but not all your products are on 7 


Now you may be wondering what happens when an element belongs 

to multiple classes, all of which define the same property like our <p> 
clement up there. How do you know which style gets applied? You know 
Fach of these classes has a definition far the color property: So, will the 
paragraph be green, blue (raspberry), or purple? 


sale a the same time, By putting your “specials Í 
olor in a separate cas, you can simply add 
e 


We're going to talk about this in great detail afier you've learned a bit 
more CSS, but on the next page you'll find a quick guide to hold you over 
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guide to 


The world’s smallest and fastest guide to 
how styles are applied 


Ek get downright confusing, 
How does all this stil come together so that you know which styles are being applied to 
which elements? As we said, t fully anxie at you're going to have ta know a Ше mor 

about CSS, and уо be learning that in the next few chapters. But before you get there 
Jets just walk through some common-sense rules af thumb about how styles are applied. 


First, do any selectors select your element? 


say you want to know the £onz-fani1y property value for an element. The first thing 
to check ic is there a selector in your CSS file that selects your element? If there is, and it 
ami ly property and value, then that's the value for your clement 


What about inheritance? 


If there are по selectors that match your element, then you rely on inheritance Бо, lonk at 
the element's parents, and parents" parents, and so on, ший уоп find the property defined. 
When and if you find it, that’s the value. 


Struck ovt again? Then use the default 


1 your element doesn't inherit the value from any of its ancestors, then you use the default 
value defined by the browser In reality, this а йе more complicated than we're describing 
here, but well get to some of those details ter in the book. 


What if multiple selectors select an element? 


Ah, this is the case we have with the paragraph that belongs to all three clases: 


nents and document trees and style rules and classe. са 


hasa foni 


<p classe"greentea raspberry bluebersy"> 


There 


are multiple selectors that match this element and define the same collar property 
That's what we call a шуй. Which rule breaks the tie? Well, if one rule is more specifie than 
the others, then it wins, But what docs "more specific” mean? We'll come hack in a later 
chapter and sce exactly how to determine how specifie а selector is, but for now, lets ook at 


some rules and get a feel for it: 
p T er's a mle bhat sleets any 
ald paragraph element, 


“This vole selects members of the greentea 


„ elas That's a Ийе more sec 


find Bis oe seris only paragraphe that are in 
pogreentea { color: green; ) ш the f 


P ( color: blacks} 


greentea ( color: gre 


dea elass, so that's even more specific 
These viles alto selest only paragraphs in a 

partie So they are about the sane 

in specificity a the pagreentea rule: 


итше рун Y S 
„„ 


www it-ebooks.info 


getting started with ess 


And if we still don’t have a clear winner? 


a, iî you had an element that belonged only to the greentea clas, there 


would be an obvious winner: the p.greentea selector is the most specific 
зо the text would he green, But you have ап clement that belongs to all 
e clases: greentea, raspberry, and blue! 


ту. So, p.qree: 


p- raspberry, and p. bLueberry all sleet the element, and are of equal 
specificity. What do you do now? You choose the one that is listed las in 
the CSS fle. IF you can't resolve а conflict because two selector are equally 
specific, you use the ordering of the rules in your stylesheet fles that is, you 
tse the rule listed last in the CSS file (nearest the bottom And in this ease 
that would be the p.blueberry rule 


In your air rtr fle, change the greentea paragraph to include ай the classes, ike this: 


<p classe"greentea raspberry blueberry"> 
‘Save and reload, What color is the Green Tea Cooler paragraph now? 
Next, reorder the classes in your HTML: 


<p clase! 


pherry blueberry greentea"> 
Save and reload What color is the Green Tea Cooler paragraph now? 

Next open your CSS fle and move the p.greentea rule to the bottom of he fle. 
Save and reload. What color is the Green Tea Cooler paragraph now? 

Finally, move the ргаврбепу rule to the bottom of he fle. 

Save and reload. What color is the Green Tea Cooler paragraph now? 


fter you've finished, rewrite the green tea element to look ike it did originally- 


‘Save and reload. What color is the Green Tea Cooler paragraph now? 
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language comparison: ess and himi 


Fireside Chats 


9 Gg Tonight's talk: 088 & HTML compare languages 


Did you see that? I'm like Houdini! I broke right 
out af your <style> element and into my own file. 
And you sald in Chapter 1 that Fd never escape. 


Have o link me in? Come on; you know your pages 
wouldn't cut it without my styling. 


If you were paying attention in this chapter, you 
would have seen lin downright powerful in what 1 
can do. 


Well now; that а little beter. Hike che new attitude. 


294 Chapter 


Don't get al excited; stil have to link you in for 
you to be at all useful. 


Here we go again., while me and all my elements 
are tying to keep things structured, you're talking 
about hair highlights and пай color, 


Okay, okay; I айий it; using CSS sure makes my 
job easier. All those old deprecated styling elements 
‘were a pain in my side. I do like the fact that my 
elements can be styled without inserting a bunch 

of stuff in the HTML, other than maybe an 
‘occasional clas attribute. 


But 1ш haven't forgotten how you mocked my 
syntax... erememher»? 
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You have to adimit HTML, is kinda chunky, but 
that’s what you get when you're related to an easly 
"90s technology: 


Are you kidding? I'm very expressive. 1 can select 
just the elements 1 want, and then describe exactly 
how I want them styled. And you've only just 
begun to see all the cool styling 1 сап do. 


Yup; just wait and see, 1 сап style fonts and text in 
all kinds of interesting ways. I can even control 
how each element manages the space around it on 
the page. 


Bwahahaha. And you thought you bad me 
controlled between your «ауле tag. You're 
going to see 1 сап make your elements sit, bark, 
and rol over if I want to. 


getting started with ess 


ai зани he tes of time, And you hin 
is elegant? I mean, you're just a bunch of rules. 
E 


Oh yeah? 


Horam, sounds as if you have a little too much 
power; Lin not эше Hike die sound of that, After 
all, my elements want to have some control over 
their own lives 


Whoa now! Security.. security?! 
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testing your inheritance skills 


f. Who gets the inheritance? 
. clement hes gone to hat grea browser he ky Buthe let 


behind a lat of descendants and a big inheritance of color "green". Below, youl find his 
family ree, Mark ай he descendants that inherit the <body> elements color green. Don't 
forget to look at the CSS below fst 


Neves the CSS Ше this to 
р 
color: green: determine which of the above 
cements hit the jatkpek and 
get the green (едо) 


color: blacki 
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BE the Browser 
Below, youll find the CSS file “style. 
css”, with some errors in it. Your job 
is to play like you're the browser 
and locate al] the errors. 
‘After you've done the 
exercise, look at the end 
of the chapter to see if 
‘you caught all the errors. 


vers nom by doing 


“The file jet M 


<style> 


body { 
background-color: white 


h1, { 
gray; 
font-family: sans-serif; 


П 


h2, p { 
color: 
) 
<em> ( 
font-style: italic; 
) 


</style> 
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validating css 


The exercise got me 
‘thinking. is there a way 
te validate CSS like there is 
with HTML? 


Of course! 


‘Those W3C boys and girls aren't just sitting 
around on their buns, they've been working hard. 
You can find their CSS validator at: 


hetp://Jigeaw.w3.org/ess-validator/ 


Туре that URL in your browse, and we think 
Y yon el quite at home when you get there. 
You're going to find а validator that works almost 
i сагу ike the HTML 
validator To use the CSS 
ЫҸ version, just ponte. 
iidator to your CSS 
URL, upload a fle with 


your CSS in‘ firs ab, | soe амана yan | 
ешрде !шойе | merum 
[pam 


You shouldn't encounter 
any big surprises, like 


needing dispar — 
nn, BH = = 


GSS. Go ahead, give it a ——— | 
not going erregen. 
to make pu do on e | 


next page, anyway) йш e 
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Making sure the lounge CSS validates 


Before you wrap up this chapter, wouldn't you fel а ot better if ай hat Head First 
Lounge CSS validated? Sure, you would, Use whichever method you want to get 
your CSS to the W3C. I you have your CSS on а server type your URL into the 
form; otherwise, either upload your CSS fle or just сору and paste the CSS into 
the form, (IF you upload, make sure you're directing the form to your CSS fle, not 2nd Fn a val т 
your HTML fle) Once you've done that, click on Check К ) 


If yur CSS didn validate, dt 
Ж ith бе CSS a fev pages back 
ard find жү =й mites ove 


Yaf Our CSS чады м 
CSE 2Î te ыы» мөл 
uidet bo CSS g 
Vrbe e rea 
5 


# shld sl alate) — 


— etl 5 Hie 


( Joke че you dale HTML 
ттен у» sek Ue "etr badge 
SE мин чык yo t be 


Foe yor CSS. Green он 


there are no 
Dumb c Questions 


Q bot need to worry iri get 
warnings? Or do what ey say? 


is good to look hem over, but youl 
find ome are more in Ма calegory of 
suggostons than “must dos. Tho validator 
can er on he side of being a ite anal, so 
Just eco atin mind. 
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getting a feel for soma css properties 


Prope: "me rapit m 
c rn“ 
ме tenker, or vight 


Jetter-spaci Tiles yo set te mis ts 
‘Spacing |e th 


iekost leka 
sf eme background-color 
color This (ауд the 
G Carnet, шеш 
ale ie 
EY m 
pod This property lets 
P E hew list 
ш Te 
lege وز‎ 
esto Ende 
prende pt 
its left öde. padding ee ТЯ 
з A 
This property sets the y Use this property 
ее s ШЕШШ 
ae, et se 


+. 


CSS has a lot of style properties. 
You'll see quite a few of these in 
the rest of this book, but have a. 
quick look now to get an idea 
of all the aspects of style 
you can control with CSS. 
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It looks like youre getting 

the hang of this style stuff 

We're locking forward to seeing 

what you come up with in the next 
couple of chapters 


Dun POINTS 


CSS contains simple statements, called rules. 


* Each rule provides the style for a selection of HTML 
elements. 


= Atypical rule consists of a selector along wilh one or 
more properties and values. 


= The selector specifies which elements the rule 
apples to. 


* Each property declaration ends with a semicolon. 


* Al properties and values in a rule go between { } 
braces. 


* You can select any element using its name as the 
selector. 

= By separating element names with commas, you can 
‘select multiple elements at once. 

* One ofthe easiest ways to include a sein HTML is 
the <style> tag. 

= For HTML and for sites af any complexity, you should 
link to an extemal stylesheet 


The «i» elementis used to include an extemal 
stylesheet. 

Many properties are inherited. For instance, if 

а property that is inherited is set for the <body> 
element, all the «body's chid elements wil inherit it. 
You can always override properties that are inherited 
by creating a more speci rule for the element you'd 
йе to change. 

Use the class attribute to add elements to a class. 


Use a‘ between the element name and the class 
nome to select a specific element in that class. 

Use "classname" to select any elements that belong 
tothe dass. 

You can specify that an element belongs to more 
ап one class by placing mule cass names in the 
dass attribute wih spaces between the names. 

You can validate your CSS using the WAC validator, 
at htpiljigsawıwê orgcssvaldator. 


301 


time for some mental pushups 


HTMLeross 


Here are some clues with mental twist and turas that will help you burn 
alternative routes to CSS right into your brain! 


Across Down 
3. Styles are defined in these. 1. Fonts without ве. 
5. Selects an element. 2. You can place your CSS inside these tags in ап 
8. Each rule defines а set of properties and HTML fle. 
4. An external style fle is called this. 
10. Defines a group of elements. 6. With inheritance, a property set on one element is 
11. Property that represents font calor. also passed down toits 
13. Ornamental part of some fonts. 7. Won this time because they used extemal 
14. How elements get properties from their parents. stylesheets 
is Property for font type. 9. They realy wanted some style. 


42. Use this element to include an extemal stylesheet. 


302 Chapter? 


www it-ebooks.into 


getting started with ess 


Lie 64 a] 
A Markup Magnets Solution 
a Remember drawing the hierarchy diagram of HTML elements = 
in Chapter vou dil г again forthe Lounges main page. 
— Em 


"н йш The ан lament are colored 


BMC 
font-family: sans-serif; 


П 
DE 

font-family: sans-serif; 
D 
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Your turn: add two classes, "raspberry" and "blueberry" tothe 
correct paragraphs in'elirhtml"and then write the styles 
to color the text blue and purple, respectively. The property 
value for raspberry is "blue" and for blueberry is "purple 


ody ( 
font-family: sans 

D 

, h2 
color: gray; 

D 

mu 
border-bottom: 1px solid black; 

) 

Pt | 
color: maroon: 

П Our Elixirs 

p-greentea { Green Tea Cooler 


color: green: 


i 1 


p.raspherry | ТЕ che tui коланы ra a at менын 
pi eem ron see ee 

) Raspberry Ice Concentration. 

p.blueberry ( 
color: purple; y 

i m 


Blueberry Bliss Elixir 


Cranberry Antioxidant Biast 
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<!doctype htmi> 
‘<html> 


79 
itylesheet" hrefa"../lounge.cs: 


<h2>creen Tea Cooler</h2> 


<p class="greentea"> 
«ing srce". ./images/green. jpg" alt="Green Tea"> 
Chock full of v elixir 
combines the tea with 
а tiat of chamomile bl jer root 
</p> 


<h2>Raspberzy Ice Concentration</h2> 
<p classe"raspberryo 
<img srce". ./images/lightblue. jpg” alt="Raspherry Ice"> 


citrus peel and r 


</p> 

h2sBlueberry Bliss ELixir</h2> 

<p classe"blueberry'» 
pop 


of elderflower herb tea will put you in a relaxed 
</p> 
<h2>Cranberry Antioxidant Blast</h2> 
<> 
<img src=". /images/red. jpg" alt="Cranberry Blast» 
</p> 
</body> 
> 
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exercise solutions 


Who gets the inheritance? 


Sniff, злі the <body> element has gone to that 
great browser in the sky. But he left behind а lot of 
descendants and a big inheritance of color ‘green’ 
Below, youl find his family tree. Mark all the 
descendants that inher the <body> elements color 
green. Don't forget to look at the CSS below frst. 
Heres our solution: 


W and K2 get he inheritance 


y jor There are ne CS 
Tease they don't have a tok DanC me ke 

heck their pote, sa blockquote sl 
үе, so they he КУ 
Talar From body brae И 


Eine p override 


i the taler 
the дуне, ща, 


pos 


Ея} 


аем of h2, which inherits 
the body color. Since there's 


тө em vule overriding the calor 
with its oun property, his em 
inherits bodys talor: 


bebe ste, For these em 
elements, they are Children 
of yavents that override the 
ү А 
body tolor, the p element 
So they don get any tolor 
inheritance From body. 


1 
ed thee poor à elements э 


аба children they dont 
ent de body calor either: 


vaina Child ol p зө mg 
Soca werit the ce from 
body img wold’ get a lor 
inheritance aep oor рү) 
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BE the Browser Solution 
| Below. youll Bind the CSS fle with 
sone errors in it. Your job vas to 
Play like you're the browser and 
locate al] the errors. 
Did you find iem all? 


Var CSS! The 
No HTML im ose CSS 
<style> e шү are HTML- and dev 


wark inà 


heck: 


body { lcd ese, 


background-color: white 
7 


Mising property name —— gray; 
and tolon 


font-family: sans-serif; 


) 


B2, P. sang property e and semicolon 


color: 
) 
„ Be HH tn nad p 
<em> { clement нате. This should be em. 
font-style: italic; 
) 


e/style» : 
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їп your elixir htm file, change the greentea paragraph to include all the classes, 
"ike this: 


' purple еме 
LZ aeter le e 

last in the CSS Ме. 
Save and reload, What color is the Green Tea Cooler paragraph now? purple 


Next, reorder the classes in your HTML: 


<p clase="zaspberry blueberry greentea"> [ssl purple betarse 
he nde of e 
Save and reload. What color is the Green Tea Cooler paragraph now?  _ purple vanes n te daut 


doesn't matter: 


К 
Next, open your CSS file and move the p.greentea rule to the bottom of the file. " 

Now, it's green, betavse 
the greentea rae tomes 


‘Save and reload. What color is the Green Tea Cooler paragraph now? у= le 


Finally, move the p.raspberry rule to the bottom of the file. 


Save and reload, What coor is he Green Tea Coler paragraph now? ee she berase | 


last in the CSS file 
After you've finished, rewrite the green tea element to look like it did originally: 


kay now the <p> 
‘Save and reload. What color is the Green Tea Cooler paragraph now? green clement only belong’ 


die mest ребре rule 
whith s partent 
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KR HTMLeross Solution 
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8 styling with fonts and colors 


Expanding Your + 
T - Vocabulary 


Your CSS language lessons are coming along nicely. You already 
have the basics of CSS down, and you know how to create CSS rules to select and specify 
the style of an element. Now is time to build your vocabulary, and that means picking up 
some new properties and learning what they can do for you. In this chapter we're going 

lo work through some ol the most common properties that affect display of text. To do 
that, oul need to leam a few things about fonts and coor. You're going о see you don't 
have to be stuck with the fonts everyone els uses, or the clunky sizes and styles the 
browser uses as the defaults for paragraphs and headings. You're also going to see there 
isa lot more to color than meets the eye. 
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Andate Hong 


Text and fonts from 30,000 feet Arial 


Ari; 
A lot of CSS properties are dedicated to helping you style your text, Using М al Black 
(GRE, you сөп ante Foe, siyle, eolas, and even he decorations tht are put omic 
i une toy and ена going te E Eo E OEE ao 
exploring the actual fonts that are used to display your pages. You've already uri ey 
. property and in б бирде ye going to iam ‘Boone: 
Jot more about specifying fonts ога 
Xie ue debo eta Ue MD ceo en Leas inner 
vta spel nd change the lock of your ш. Afer tat, wen take e Times Ne 
fonts one by one and learn the ins and outs of using cach. 3 New Rom, 
an 
Trebuchet mg 
Verdana 


Customize the fonts in your pages with the font-family property. 
Fonts can have a dramatic effect on your page designs. In CSS, fonts are 
divided into “font families” from which you can specify the fonts you'd 
like used in each clement of your page. Only certain fonts are commonly 
installed on most computers, зо you need to he careful in your font 
choices. In this chapter we'll ake you through everything you need to 
know to specify and make the best use of font. 


Merah wel se in a bit 
how you tan expand the los 
avaiable te Yor breve 


body ( 
font-family: Verdana, Geneva, Arial, sans-seri! 


) 


Control the size of your fonts with the font-size property. 
Font size also has а big impact on the design and the readability of your 

web pages. There are several ways to specify font sizes with CSS, and in 

this chapter we'll cover each one, but we'll abo teach you how to specify 

your fonts in a way that allows your users to in 

allecng your designs. 


ase the font size without 


styling with fonts 


‘Add color to your text with the color property. 
3 ii il e tk Ез mem ES 
You сап change your text color with the color property. To do that, it 

helps to know a lle about web colors, and we'll take you through all the 
ins and outs of color, including the mysterious color "hex codes. 


body ( 


color: silver: 


DESS 


Affect the weight of your fonts with the font-weight property. 


Why settle for boring, average fonts when you can give them some extra lighi 
weight when needed? Or are your fonts looking too heavy? Slim them down 
toa normal weight. АШ this is easily done with the font-weight property 


normal 
body ( bold 


font-weight: bold: 
П bolder 


‘Add even more style to your text with the text-decoration property. 


Using the texz-decora: 


property, you can decorate your text with 


none 
decorations including averlines, underlines, and line-throughs. 


underline 


overline 
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What is a font family anyway? 


‘You've already come acn 


lays specified а value 
that with the 
is first, Her 


Each font-family contains а set of fonts 
that share common characteristics. There 
are five font families: sans-serif, serif, 
monospace, cursive, and fantasy. Each 
family includes a large set of fonts, so on 
this page you'll see only a few examples 
of each. 


V 
Serif fawily 


Times 
Times New Roman 


Georgia 


314 


Trebuchet MS 


оп can get a lot more creative than. 
but it helps to know what a font family 


Sans-serif family 


Verdana Arial Black 


Arial 
Geneva 


Fonts aren't consistently available from one computer 
to another: In fact, the set of available fonts will vary 


depending on the operating system as well as what 


fonts and applications a user has installed. So keep in 
mind that the fonts on your machine may differ froma 
what в available to your users. And, as we said, we'll 


show you how to extend the set of fonts in a bit 
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Monospace family 


Courier 
Courier New 


Andale Mono 


while sans-serif fonts have a very clean and 
readable look. Monospace fonts feel li 


Cursive family / 


‘they were typed on a typewriter. Cursive and 
fantasy fonts have a playful or stylized feel. 


Comic Sans 


Apple Chancery 


Fantasy family 


LAST NINJA + 
Impact 
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develop your sense of font 


Font Magnets 


Your job isto help the fictional fonts below find their way home 
to their own font family. Move each fridge magnet on the left 
into the correct font family on the right. Check your answers 
before you move on. Review the fent family descriptions on the 
previous pages if you need to. 


EIE 
Monospace family Fantasy family 


Cursive family 
‘Sans-serif family 


Serif family 


Nautica 
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Specifying font families using CSS 


Okay, о there are a lot of good fonts out there from several font families. How do you 
get them in your pages? Well, you've already had a peek at the ront-t2i1y property 
m the last chapter, when you specified a font-family of “sans-serif” far the lounge. 
Here's а more interesting example 


Wal, your font-family specication contains a 
D 


Lal alim 
body { ANS 


font-family: Verdana, Geneva, Arial, sans-seri 


7 t ens eerta 
"um t 


is all fren the sine family 


Ye tan specify nere Sar ore 
Font wing the fe 
peter Jat type the Emt 
anes separated by comma: 


are spelled, inel 
ord loneneae letters op pot э genet Font family name at the 
cd. le "ir" "areae", td n 


jis does iw a set 


— 


How font-family specifications work 


Heres how the browser interprets the fonts listed in your font-famt 1y specification: 


Chet tase the fmt IF Verdana at IF Ke et 

Verdana u вае е . ааыа he lock elde G l. Fal iF none of the specific 
mers computer and if ө For the font Genes, Bede Aah a fos Cam be Fan job vse 
жей De Tant for ба and fo ale ДО weer the eser нет 


clement lin is tases the e it for the body fur the body 
ойр бее), 


body ( h^ АТВ" 


font-family: Verdana, Geneva, Arial, sans-serif; 

1 Yav don have to specify far alternative Font: yor 
tan have bes Ehee, ete- In the last hay 
жей оне De default cet Ге Њон) ve 
. 


a default "aer" font 


мык tenir over the Fonts you'd 


‘The font-family property gives you a way to create a list of preferred fons 
Hopefully, most browsers will have one of your first choices, but if not, you can atleast 
be assured that the browser will provide a generic font from the same family: 


Let 


get some fonts into your pages. 
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improving tony's journal 


Dusting off Tony’s journal 


Now that you know how to specify nts, let's take 
another look at Tony's Segway'n USA page and 


give it a different look. We'll be making some small, 


incremental changes to the text styles in Tony's 
Page, and while no single change is going to look 
dramatically different, by the end of the chapter 
we think you'll agree the site has а slick new look. 
Let's get an idea of where we might make some. 
improvements and then let's give Tony a new 
font-family, 


Remember that me havent applied 


any ejes to Tn "ibe, 10 Ка эйе ——> 


Ld a serif Eh for 
be entire pase 


el mea ie sy pet reg 


od 
ay a 


July 14,2012 


“The defo ше of the heading Forts LÍ | em Sie sine ey 


i alo pretty arse and de nake 
Tor an attractive pase 


would be riec o improve id look 
3E by adding some font-style 


Except for the photos Bis page 
Ee iade ueri d 


al add some fort toler to make 
1E a ille more теб 


sis сме 


E 
fenis 
cy wt eg an on 


June 2,2012 


My ey ol et aia aly ol veg acid aod 
‘iy Seman жа ee nant abe рк чк ш 


m———— 
prd 
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Getting Tony a new font-family 


Let's get Tony set up with a font-family, We're going to start with 
some clean sans-serif fonts, First, create а new fle, “Journale” in the 


“ehapterê/jourmal" folder and add this rule: 


body ( 
font-family: Verdana, Geneva, Arial, sans 


П 2 N S кы 


Er kae. ^ Cu еөз dd it all due 
fon: Boi түү е №. and Geneva on fails, we have 
pena nad" os 
elements in the <body> шо, = 
wil est бе бы], кете 

We've chosen 1 ae 

Scat bra ke 


Now you nerd to link Топу journal to the new stylesheet file. To do that, open the 
file “journal html" in the "chapter/journal" folder, Add the <Link> element to 
link in the style in "journal cs" like we did below 


Wee alse gone ahead and updated Ton 
journal htni File to be official HTMLS, 
Hang Бе dete and the <meta» tag 


<tdoctype html» 
pes 
head» 
<meta charsete'utf-ü'» 
<link type="text/css" rel="stylesheet" href=" journal. css"> 
<titleoMy Trip Around the USA on a Segayc/title» є 


Were where мете 


</һеза> 

<body> king in he rev 
journalen” file 
E 

</body> 

p 
After you've made this change, save the fle, fire up your browses, and load the page 
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some font questions 


Test driving Tony’s new fonts 


Open he page with the new CSS in the bowser and you Fee eee 
should see we've now got a nice set of sans-serif fonts — 
Let's check out the changes. Segway'n USA 

The font definitely ser Tonys web page a new F 


look. The headings row have a leaner lok che- 
the зен on the letter, although they st B 


tad large on De page 


Tie paragraph tent ake 


lean and very readable 
“te 1 ede #1200 mies елау, and T passes through 
ome aresta pars ont way 


виз fni is an inherited property, pape 
eee deere DE] 
recen font, even the Tek cements r) 
Е 
And the <blockquote> nn 
tare See Shove se dg onthe کا مل‎ 
find if the serif Fonts were more Yor bacs 
topo taa de n e Vete Em 
alaye rede the font-family derlarat Vet gt pont 
боме seri ants [rua 


Черге 
0 
Dumb Questions Q; ene, Quae О; манны 
: ae. er омы» 
Gere RIED 
with multiple words in the : “serif and "sans-serif are DEM 
Fico dN ROME decir Halo doe ie) 
322 òù S een 
ade e O 
e 
JJ ˙ↄ - ͤ V 
„„ Secs з кош, 
ар а равону ЖОРТ were але 
2 ð v 
eee ee 
— ег 
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How do 1 deal with everyone having 


different fonts? 


he unfortunate thing about fonts is that you 
can't control what fonts аге installed on your 
sers? computers. Not only that, but they tend. 
to diller across operating systems what might 
be on your Mac may not be on your user's PC 


Бо, how do you deal with that? Well the tried- 
anden strategy is to create а list of fonts that 
are most appropriate for your pages and then 
hope the user has one of those fonts installed. 


Thee ft 
me > 
pen 
кмш 
жа Maeno 
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Andale Mono 
Arial 

Arial Black 
Conic Sans 
Courier New 
Georgia 
Impact 


IF he dct el tee cen ct oe т Times New Roman 
Imerys at йс ашк та 
Let's look at how to do that in a little more Verdana 
Sal Wha yu need od cure tha our 
fonder indie that these uli enen 
Мыйыгынан N лен 
mig hc wing e Linus or per moli paa Helvetica 
dened) and aia nln ft aay Б Pads 
Нер example 
"m (D wd efr а) тый ay berane e 
пзе иез tan probably count en Arial 


sor definition for Tos 


bears to be 
ре te be on either Windows or 


pm | Maes, bok б m 


font-family: Verdana, Geneva, Arial, sans. 

"i 

T 9 The that’ bl 
ic, bot hc wil probabh say well jo let the 

Pol n brouser hosie а sans= 


serif font for ue 


erif; 


en happen on Macs БА 


з21 
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introducing wob fonts 


T get how we need to make sure we 
“specify fonts that will be appropriate all 
across oll my users machines, but I was 
really hoping we could use this cool Emblema 
‘One font I found for my main heading, Con I 
just use that, and if the users don't have it 
they can use а fallback? 


Your suggestion would work, but most likely for only 
a very small percentage of your users. If you just 
have to have that ob-s0-cool font, or typography is 
important to your site design, you can actually deliver 
a font right to your users browser using Web Fonts, 


To do this, you're going to use а newer feature of 
CSS: the gene- tace rule. This rule allows you to 
define the name and locaton of a font that ean then 
be used in your page 


Let's see how this works. 
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How Web Fonts work 


With Weh Fonts you can take advantage of a new capability of modern browsers that allows 
you to deliver new fonts directly to your users. Once the font is delivered, the browser ean 
then make use of the Web Font just like it can any other font, and you can even style your 
test with CSS, Let’ ook at how Web Fonts work in a itle more detail: 


ee yor serer 
Here's 3 font file you've J 
irt en Yor tee 


V 


4 Еа | 
e e B | 
Ж 


ends to ме the font 
Th your web паде 4 


ve www.starbuzzcof fee com 


Notice ths font wee p 
a neff" Ule extension, 
Font Format \ D course your server stoves all 


ү HTML and CSS too, but 
vere nat showing that here. 


Ө To moke use of Web Fonts, the browser first retrieves an 
HTML page that references them. 


“T need index him = 


==> — 
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© The browser then retrieves the Web Font files needed for 


the page. 


“I need crazyfont woff* 


Ө Now, with the font retrieved, the browser uses the font 


when it displays the page. 


О: Whats the wot, or web open tont 
format? 


2 Wof ls emerging asthe standard 
fool ema for Web Fonts, and youll se it 
supported today across ali modem browsers. 
‘Thal said, thara has previously been some 
lack of standardization in tha area, with 
derent browsers supporting diferent font 
formats. f you need to provide Web Fonts 
"o browsers that may nol support мой, youll 
naed to supply one ar more of a few formats 
that ara avaiable as llematves Web Font 
hosting services can help a lot here. 
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Dumb Questions 


О: soto use a Web Font, Ihave to 
toa the font fls ona server? 


А: tyra ena you cin 
ata sore ana rt en ab at 
En your oun asi (a ou 
тап тад. a you van dake 
ke Jot uut Fe Vh jr 
lo inr al a ey 
ormako us ofa adig sarien, шаги 
Gaga's anien s tae 
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Q: ii uso a Web Font can then 
count on it being there for my users? 


А: asena as hey ravo antes 
эге (dac ny ad 
e тти mest 
pat yet. Hone yn it 
Sensor or mee devas bal dont yet 
жоро Mev Fons, i peis ае of ard ou 
S reet open trabes (e 
ee 
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How to add a Web Font to your pagi 


So you've got a special font you want to add to your page? Let's чер through how to do that using 
Web Fonts and the боло - face rule in CSS. 


Step one: Find a font 


If you don't have a font, like Tony does, you'll want to visit the many stes out there that have both 
dicc and licensed fonts you can use in your pages (check out the appendix for more information 
We're going to use Tony's suggestion, Emblema One, which is a free font, 


Step two: Make sure you have all the formats of the font you need 


тене than TrueType 


OpenType font: oif 
VETT Enbedded OpenType (EDT) pet form of Of ye 


Embedded OpenType fonts eor (Ë+ proprietary (Меш and ert nyo Е 


. Graphies, or SV, is a several ure graphs 


Format, and SVG fonts we 


is Format to represent characters 


le open ont format is based on TrueType, and и being developed asa 


Web open font format: sol 
standard for Web Fonts [Us well supported on mast modern br 


The best supported format across most modern browsers is web оре 
the one we recommend you use. You ean offer an alternative for older browsers; well use 
‘TrueType as that's well supported across all browsers too (except IE). 


font format, so that's 


Step three: Place your font files on the Web 


You'll want to place your font les оп the Web, so they are accesible to your user's browsers, Or 
you can use one of the many font services coming online that will host these iles for you. In 
either case, you'll need the URL of your font fles. Here are Tonys fles, which we've placed on 
wicked] ysmart com 


мир: //wickedlysmart..con/hehtmless/chapter6 /journal /EnblemaOne-Regular мове. 


nttp://wickedlysmart..com/hthtmlcss/chapter8 /journal /EablenaOn 


Regular tte 
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Step 4: Add the font-face property to your CSS 

Youve got the URLs for the wel and sf versions of the font named “Emblema One," о now 
you're ready to adda оле face rule to your "journal es? fle. Add the rule to the hp of the 
fi, above the body rue 


aed 


Unlike a normal ide that selects a se of elene 
эшк style, De Bont fate vale sets а Font hi 


wath Bie face seme to 2 ГНЕ бу rame For later we Те 
) EET 


E rane, ike "Emblema Ove 
font-family: "Eublema ope"; fort rns e “Ertl 


аге: url ("http://wickedlysmart. con/hthtmlcss/chapter8/journal /EablenaOne-Regular.woff") , 


f url ("http://wickedlysmart. com/hfhtmless/chapter8/Journal/EmblemaOne-Regular. ttf") ; 
П 


Tie wt property ell Ehe browser where to get the font We need 
be specify à or die For every File the rower might тоу. 

và to supply both the мо and LU types 
ined by todays browsers 


"The font-face rule tells the browser to load the font files at the are URLs. Browsers will 
attempt to load each sc file ший it finds one that it can support. Once loaded, the font is 
assigned the name you specify in the font~fast 1y property inthis case, 

Now let's take that font and see how we can use it in the style of the page. 


Hin: you already new 


Step five: Use the font-family name in your CSS how to do the! 


Once you've loaded a font into the browser with the font-face rule, you can use the font 
by referencing the name you gave it with the font-family property Let's change the font 
of the «hi» heading in Tony's page to use the “Emblema One" font. To do that, we'll add 
a rule for «hi like this: 


«экө the name of bhe Font yt 
po „„ 
ee aia con ёч шш Prd ek ta 
ж-на фе wert ve spi inae 

ar a fabae 


m 


Step six: Load the page! 

Tharsit You're ready to test your font. Reload Tony's journal page and check out the next 
page to see what we got, 
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Tony's journal 5:59 
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M 


When you reload “journal bm, you should sce he. 
ha» heading i tp f the page use бе Emblem 
Опе Nor had for jus a few lines of CSS! ^ 


Nom, the <h> heading at be 
tap of Tens oral pase i 
sons fot “Enblema Ove 


ттє and WOFF 


Waich it! 


tf you want to 
apport users wif older IE browsers, 
Jou need до а бї more work wth 


Web Fonts, and use an EOT font 


The @font face rule doesn't really 
ook or act ike a CSS rule, does it? 


А: зарина 
atc enen 
e 
КЕЕ 
‘am hd ae erage 


О: se thore other builtin CSS rts 
shoud know about? 


2 There are. Two соттоп bull rules 
oul see are import, wich alews you lo 
import ather CSS fles {rather han a nk 
in your HTML), and @теда, which alows 
you lo reae CSS rules а! are spect lo 
certain "modia" урез в a printed page 
versus desktop screen versus a mobie 
shone, More on moda iater. 


PNE. | 


there are ne 


Dumb Questions 


О: Web fonts seem great are there 
any disadvantages to using hen? 


Å: aim Ft won 
Web Fonts and so your page afümance. 
‘ight sufer 1e fest Ime you have 1o 
тене Den. Aso res he pain ol 
тагар he пише ont fs Fay, you 
tray fd moble ad smal devia hal dort 
Support hen, so make sure you aways 
Blow ranas your design. 


О: cant use multiple custom oni 
чабата? 


Yes. I youre using @lonace to load 
thant, hen lor each ont you want lo use, 
тае sure the font ез are avaiable on your 
sare, and create a separate font aca. 
"la for each one, so you can gwe eacha 
unique name. A 


For even more on Web Fonts, / 


hetk e the agendis 
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However remember lo make sure you oniy 
choose the fonts you realy need in your web 
аде. each extra font lakes extra loading 
Ime for your page, so having muliple Web 
Fonts in your page wil slow доп your web 
page. Iit gets too slow, you might have 
frustrated usaron your hands! 


You mentioned services to help 
mo with hosting Web Fonts. Can you say 
more? 


иге! Fonsi (ip: 
lenlsquira cam) à a great place 1o ind 
open source, free fonts ha you can upload 
to your server. Tha font Ма make It easy lo 
fer multiple formats of a given font Googie 
Web Fort Service (tp: google cor 
wetors] в a way you can lel Google do all 
"he hard work or managing the fons and the 
CSS for you; n his case, you ust ink 1o he 
fons you wanton the Google sence, and 
"hen use the names п your CSS. Easy! 
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Adjusting font sizes 


Now that Tony has a new set of fonts, we need to work on those font sizes, as most If you do thing ht ary 
people find the default sizes of the headings а bit large, at least aesthetically Toda / ке wil be able to ren 
that, you need to know how to specify font sizes, and there are actually a few ways the fe 
to do this, Lets take а look at some ways to specify £o and then we'l talk page for readable Y 
about how best to specify font size so they are consistent and user са; tet how in a tefie ef 


‘ou can specify your fant sae in pel, jut ike he pe dimensions you aed 

for images in Chapter 5. When you specify font size in pixel, you're teling 

the browser how many pisce ый the ters shoul br 

font-size: aps; f le CSS yo se vs 

a ree fallow by" 

The pent tome ri aftr the ake of Fc, bat De um 
ed e tort hae a hebe v rsen 


berg within à body 


mid [piee 
2 А Bis) 


T 
reine that there will be 14 
peeh between the lone part of 
the letters and the highest. 


fonts 


ize: 1808: Here we've a 


fied a body font size in 
Titel, and a leelone heading ж SOK 


how that works. 
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body ( 


3 
mt 


П 
* q 


0 


font-size: 14px; 
font-size: 150%; Wat y 


font-size: 1.2em; 


i e 

те чү Bat the җе 

font-size: 1.2m; bet sue ld be ы 
porn 


Say you ше this measurement to specify the size of an 
<2> heading, Your <h2> headings will be 1.2 times the "EO 
font size of the parent clement, which in thls ease is 1,2 КЕ ably 2, bef 
times Тарх, which is about 17px. өк phe de 
— treni 


Md here's the dd 
ТИРИ 


П 


Heres the b specified 


Y 


IF we draw à Ve document tree, yos tan see that <hl> 


hei 


From Федр, so its bet 
the body's font sine 


Font size which i pe 


cng to be 150% of 
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using keywords for 


‘keywords Theres опе more way to specify ont sees: суннии. You 


con specify а font size as хх-ата11, x-small, small, 


x-large, or xx-1arge and the browser 
will translate these keywords into pixel values using defaults 
that are defined in the browser 


Thic и уреду how the en keyword 


velate b اس چ‎ 


өч another, Eath sizz ir shout 20% larger than the 


previous size, and small в vually defined & be around ман 

T dein eb Keep in ind, be, that the smal 

е: arent ар died the sane әү in не а 
buen nd Bat mers tan vedene hen d bey omt medium 
large 

body ( 9 


| х-!агде 
t arge 


So, how should | specify my font sizes? 


You've got quite a few choices for specifying font sizes: px, ел, percentages, and 
keywords, So, which do you use? Here's a recipe for specifying font sizes that 
will give you consistent results for most browsers 


Ө Choose a keyword (we recommend smal or medium) and specify itas the 
font size in your body rule. This acts as the default size for your page. 


Ө Speci the font sizes of your other elements relative to your body font size 
using ether em or percentages (бе choice between em and percentages 
is yours, as they are essential wo ways to do the same thing). 


Nice recipe, but what's good about it? By defining your fonts relative to the 
body font size, its really easy to change the font sizes in your web page simply 
by changing the body font size. Want to redesign the page to make the fonts 
larger? If your body font size value i sma 11, simply change it to mediun, and 
voilà every other element will automatically get larger in proportion because 
you specified their font sizes relative to the body's font size. Better yet, say your 
тшт» want to resize the fonts on the page. Again, по problem; using this recipe, 
all the fonts on the page will automatically readjust 
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Let's ook at how this all works. First, you set a size for your 
<body> element, Then, you set all the other font sizes relative to 


that size, lke this: 


body ( font-size: small; } 
hi ( font-size: 1500; ) 
h2 ( font-size: 120%; } 


That gives you а document tree that looks ike this 


hl is 150% of body | E [h2 is 120% of body 


The <p> does hive a font-size vale set, so 
by default, st inherits the dd ant sine 


say you want to increase the size of the fonts on the page, 
docs. Then you get a tree that looks like this 


Now let 
or perhaps the us 


New let's ay you decide bs make Your 
Fent size bigger, OR the wer makes the 
font se bigger using the browser 


Aly 
automatically get lager too, 


ess ү 024 


X 
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Older versions of 
Internet Explorer. 
do NOT support 


Watch it! text seating 


De body fort 
P 


EM 
the font size using pixels. d 
EE eram 
E ia 
Oe 
Somer 
— 
See 
e 
e 
rome 
mercial 
— EIE 
n E eT 
METER, 
RT ELI 
700 


20% the ine of 
10% of “large 


i 


hi is 150% of body | p is large || | h2 is 120% of body 


Now the body font size has changed to large, and everything else has 
‘hanged too, in relation to the body font size. That's great, because 
you didn't have o go through and change all your other font sizes 

all you had to do was change the body font size. And if you're a user, 
everything happened behind the scenes. When you increased the text 
size, all the text got bigger because аЙ the elements are sized relative to 
‘one another, so the page still looks good at a larger font size 


=, зз 


setting up tony's for 


Let’s make these changes to the 
font sizes in Tony’s web page 


Tes time to try these ont sizes in Tony's web page, Add the new properties to the 
journal cse" file in the *chapteri/ journal" folder, Once you've made the changes, 
reload the page in the browser and check out the differences in the font size. If you 
don't see a difirence, check your CSS carefully far errors 


@font-face ( 
font-family: "Emblema One"; 


П 
body ( 

font-family: Verdana, Geneva, Arial, sans-serif; 

font-size: small, —— 
j of smal! for the <body> element. Tht wil 
Wu эй ac De base fo 


font-family: "Emblema One", sans-serif; 
font-size: 2208; үс 


r" your pencil 
кунары! Ans and iS font stes using em athe than 


percentage, what would their values be? 
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Test driving the font sizes c pps i d 


smaller fonts, Check out the differences. 


— 
Heres the ges FID DICIS — 
T- — egway'n USA PEE eee 


«— nth better vos [ES 


metre ey aee eiim eye own segan bigger than the 42> 
TRES August 20, 2012 pa 
j сеч the body test 
Segway'n USA 


and he Page in size 
‘ocumerting my тта arouna the us ¢ 


August 20, 2012 The bey test is 


a tad maller. The 
delat body test 


font site и wally 


esos [peni 

E papane 
ree bea Bat e 
Hoe “en ale 

m— А т E е als 

КАИ hen rey 

Nnm i — pera 

Hd 

С ned Ка 

uy 14, 2012 ros DES 


1 saw some Burma shave ние signe 


Кетин The А25 beading 
ушун ia bit ae to, 
prec ard ie a good ine 
ése. 4 ed 


pr 


1óefoialy wort be passing any car AP heading 


‘Syn Sadat mana Somes, dee ЕЕ ЧЫ e vî ne ША 
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тоге questions on font si 


Q: so, by detning a fot az inime 
dp ciment In somehow defining a 
default sizo for the page? How does that 
wort? 


А: ves tats ront sy tng ont 
жап уг an elment, yau can Den 
atna crt siese of eur cent 
‘n alaton o of апп Whats so geat 
Satta Wel, yore i charge he 
fn nn al you nava oi cunge 
tbat rst adv dei 
change n pain 


О; no we realy nea to wory about 
ser resizing hel browser fonts? | 
neve do thal 


Yes Almost all browsers alow her 
ss to make Ме text of a page bigger or 
smaller, and many users take advantage 
ofthis feature. I you define your fanis in a 
теде manner, then your users will have no 
trouble ding this. Just be careful not to use 
рәш sizes, because some browsers have 
problems resizing hose. 


О: iia te idea of using poet: 
because then my page vil look exactly 
ike speci i 


Tere в some ruth to that by using 
pixels or every elements font size, you 
ara choosing ha precise font size you want 
foreach бетеп, But you do hat at he 
cost ol gung some of your users (he ones 
sing older versions пете Explorer) 
"hefexbit lo pick a font size that is 
appropriate for hir берау and eyesight. 


You also are creating pages tat area 
le harder to maintain because if you. 
suddenly want to increase те font sizes of 
alte elements in a раде you have a lot of 
changes to make. 
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Dumb € Questions 


О; wats the dtterence between em 


Д: Mey sre tascaty mo aneron ways 
inattive he samo вас Boh ge youa 
‘ay pect a siza iae w Pa pant 
Ten naa A ol pe Ind percert easier 
atik abou питат and a aasar 
Taradi уш CSS B ou Sraa we 
‘chron 


Qtr sont specity any tont sizes, ө! 
Just get the default font sizes? 


Yes, and what hose sizes are 
‘pends on your browser, and even the 
versn of he browser you are ruming. But 
in most cases, he defaut body font size wil 
be 16 pols. 


О: And what are the default sizes tor 
ıe headings? 


А: к et or te one bul 
ЖҮК] 
lori аш е Т рати, 
Sisi, аби adobe 
GP hey eu do e sane 
feria tato наа dod 


О); so rather than using the sizo 
keywords, can 1 use em onthe body 
rue? se Ph for the font size of he 
body, what does that mean exact? Its 
e wat? 


А: es. you can domat ya spy 
‘eta i your bo nde, t 
ataut нл, o/e dd fem, 
sh aba sa uty M phi о 
SOs woud ta tod pi Mya a 
font sze чу trent han e yin 
posae ge ad and usa orem 
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О; There seems to be so many 
diftus between browsers- font- 
family font, various default setings. 
and soon Нон wil өни know у 
design воз good on other browsers? 


2 Great question. Th easy answer 
is hat you flow the guidelines in his 
chapter, hen most f your designs are going 
1o look just fine in othar browsers. However, 
You should know that thay тау look slighty 
ferent in diferent browsers the fonts may 
be slighty bigger or smal, spacing hore 
and hero тау be diferent, к. But al he 
diforoncos shouldbe very minor and should 
nol affect he readabily al your pages. 


However, i you really care about having 
your pages looking almost alen many 
browsers, hen you realy need to lest hem 
in lols of browsers. And lo realy take is 
1o the extreme, youl fd a variety ol CSS 
“tacks” b yt make diferent browsers 
behave the same. I you want to take I his 
far, heres nothing wrong wilh that, but just 
keep in mind a lot of these actes ta 
те and have diminishing ratums. 
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Changing a font's weight Starbuzz Coffee. 


сара. 
The fait eight property ben to e ر‎ denm 
boll the text looks, As you know, bald text looks darker font-weight: ermal 


than normal text and tends to be a bit fatter too. You 
сап make any clement use bold text by setting the 
font-uelght property to bold, like this: 


font-weight: bold; 


You can also go the other way: IF you have an element 
that is set to bold by default, or is inheriting bold from a 
parent, then you can remove the bold style like this: 


font-weight! normal; Č 


There are also two relative font-weight properties: амь bel 
bolder and Lighter, These will make your text 

style lile bolder ог а йе lighter relative to its 

inherited value. These values are seldom used and 

because not many fonts allow for slight differences in. 

the amount of boldness, in practice these two values 


Starbuzz Coffee 


Beverages 


often have no effect, 


You can also set your to roperty toa. 
number between 100 and 900 fin multiples of 100) 
but again, this is not well supported across fonts and 
browsers and so is nat aden used, 


Write the CSS to change the second-level headings in Tony's page from their default 
bold value to normal weight Then, add the rule ta your CSS and give it a test drive. 
‘Youll find the answer to this one on the next page. 
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Test drive the normal-weight headings 


Here's what your CSS should look like after you make the change to 
we a normal font-weight for the «h2» heading: 
font-face 
i: VO em Were leaving ovt the fll font-face 
definition {в ые some spate 


П 
А 
‘font-family: Verdana, Geneva, Arial, sans-serif; 
font-size: small; 
П 
Lu 


font-family: "Emblema One", sans-serif; 


П Bg — 
шаў! Qnae rit 


font-weight: normal; Segway'n USA 


‘August 20, 2012 


Mere we've charging the font-weight 
of the <h2> heading to normal 


Wet Ease 1200 aes гегу, en 1 peed tough ome 


rex coon ray 


i oro 


fd hve ae the vndis The dd кезе 


майыр ave ro he king : 
Yes tan sl tell they are headings > qnyis 2012 

ые Bey are BOM the sat af — sont ett ty: 
the bly ot e 
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Adding style to your fonts 


‘You're familiar with italie text, right? alie text 
is slanted, and sometimes has extra curly serif 
For example, compare these two styles: 


sted to the vt 


not italic The ake tert i 
the seri 


pea s cra tus 
italic n 


You can add an italie style to your text in 
CSS using the font-style property 


font-style: italic; 


o Check your sel 
However, not ай fonts support the italic style, 

ıs what you get instead is called alique text 

Oblique text is also slanted text, but rather 

than using a specially designed slanted set of 

characters in the ont, the browser just applies 

ıa slant to the normal letters. Compare these 

non-oblique and oblique styles 


not oblique The regular letters are 
QUO a tise eit 
oblique the eb style 


Yon can use the font-style property 
to get oblique text toa, like this: 


font-style: oblique; 


In practice, you're going to find that, depending 
оп your choice of font and browser, sometimes 
the two styles will ook identical, and sometimes 
they won't. So, unless italic versus oblique i 
very important to you, choose one and move 
оп. If it is important, you'll need to test your 
font and browser combination far the best 
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Ttalic and oblique 
styles are two styles 
that give fonts a 
slanted appearance. 


Unless you can control 
the fonts and browsers 
your visitors are 

using, you'll find that 
sometimes you get italic, 
and sometimes oblique, 


no matter which style 
you specify. 


So just go with italic 
and don't worry about 
the differences (you 
probably can't control 
them anyway). 
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Styling Tony's quotes F RA 


with a little italic [| 


Segway'n USA 


Now we're going to use the font-style property 
чо add lite pizzazz to Tony s quotes, Remember 
the Burma Shave slogan in the <blockquote> August 20, 2012 
clement? We're going to change the slogan to italie 

style to set it off from the rest of the text. To do 

that, we just need to style the «blockquote» with а 

font-style of italic, like this 


blockquote { 
font-style: italic: 
m——— rah some 


Ad hs ew CSS rule to бе CSS in your ает 


Journalce" fle, save i, and give the page а imme 
test drive, You should sce the Burma Shave тсс 
slogan change to баве; here's our tet drive. س‎ ht 


ЕЗ 


COPS July 14, 2012 


n М {an юте Burma Shave style sgn оп the чөе of the road today: 
heroje ge, , =. Сюд 
Dumb Questions — ee 
rs 
Я ш. 
О; пиши ве «основ» is actualy iid {com we oe stg any өт. 
э that inside the <blockquote». So, how did this 
change the paragraph to ale? June 2, 2012 И 
Д: Ramaner by вњ тон ome got et 


уз fom tha parents, andthe parent ol this paragraph 
is the <bockqucle> element. So th paragraph win the 
<blockquote> inherits ta talc style. 


О: и iant jt put e ent into an «an> 

torent inside the <blockquote>? Wouldn't thal do the Here's the ме style on the Burna Save 

Same ng and — dg To ae We slated dk 

e vantes 

Remarc fr spying илеше. <em> 

says mata setot words srok empha. at we 

‘Sg siang a ойдон» wa are no ndctg hat be 

жав Фин» th bo ena So wa 

эшда у, on most rores ar куа vim alts 

Tat na rani uay зуе herein те адий Aa 

йир ed Ка be өто coud ranga, so ш 

Soult coun oa cn? day beg tal 
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Cool. Love the new look. Hey, 

how about a little color in those 

fonts? Say, ummm. the color of 
ту shirt? I love orange! 


‘You'd think we could just tell you there 
жава color property and send you on. 
your way io use i, But unlike font sizes 

or weights or test styles, you've got to 
understand a fair bit about color to he able 
to work with it and specify it in CSS. 


So, over the next few pages, you're going 
to dive into color and learn everything 
you need to know to use it on your pages: 
how colors on the sereen work, the various 
ways of describing color in CSS, what 
those mysterious hex codes are all about, 
whether you should be worried about 
меза calors, 

ж. way to find and specify colors 


nd whats the easiest 
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overview of 


How do web colors work? 


You're starting 10 see that there are lots of places you can add 
font colors as well. В 


pages: background colors, border co 


how do colors оп a computer actually work? Let's take а loo 


Web colors are specified in terms of how much 

red, green, and blue make up the color. You 

specify the amount of each color from 0 to 

100% and then add them all toc 

100% Red 100% Blue at a final color. For instance И you ас 
red, 100% green, and 100% blue together, you 

get wi 

mixing together colors r 

After all, this is light we're mixing! 


. Notice that on a computer screen, 


100% Green 


But if you add, say, only 60% of each 
component (red, green, and blue), then what 
would you expect? Less white, right? In other 
words, you get a gray color, because we're 
adding equal amounts of the three colors, but 
not as much light to the screen. 


wwnw.it ebooks info 


Or, say you mix together 80% rod and 40% 
green. You'd expect an orange color, right? 
Well, that's exactly what you'll get. Notice that 
И a color is contributing zero, then it doesn't 80% Red 
affect the other two colors. Again, this is 

cause there is no blue light being mixed with 
red and greer 


And what if you mix 0% of red, green, and 

iue, then what do you get? That means you're 
sending no light of any kind to the screen, so 
you get black. 
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0% Blue 


E 


color nar 


Why do T need to know all 
this "color theory"? Cont I just 
specify my colors by rame? Like. 
“red,” “green” or "blue"? That's 
what we've been doing so far. 


You certainly can use color 
names all you like, but CSS 
defines the names of only 
about 150 colors. 


While that may seem like a ot, that 
palette gets old pretty quickly and really 
limits the expressiveness of your pages. 


We're going to show you how to specify 
colors in a way that will allow you to 
name a lot more than 150 colors: in fact, 
youl be able to work from a palette of 
sixteen million color, 


Now you've already seen a few examples 
of colors in HTML, and yes, they do 
look a little funky; like 4221257. So, let's 
first figure ош how to specify colors and. 
then you'll see how you can easily se 
color cha 


s, online color pickers, or your 
photo editing application to pick your 
colors, 
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How do I specify web colors? 
Let me count the ways. 


CSS gives you a ew ways to specify colors, Vou can specify the 


тане of а colo, specify а color in terms of is relative pena 


in red, green, and blue, ог you can specify your color using a hex any brewer, but 


de, which is shorthand for describing the red, green, and blue 
components of the color [so extended calori in 


While you might think thar dhe Web would have decided on one eR 


format by пом; ай these formats are commonly used, so it's good 


) 
у 


to know about them all. However, hex codes are by far the most 


common way of specifying web colors. But remember that all 


these ways of specifying color ultimately just tell the browser the Aqua 
amount of red, green, and blue that goes into а color 
Let's work through each method of specifying colors in CSS, 

E Fuchsi 


Specify color by name 


The 
use its name, There are 16 basie colors and 150 extended colors Gray Green 
that can be specified this way Let's say you want to specify the color 
"silver" as the background color of a Боду element here's how you 
write that in CSS: [3 [T 


body ( 


background-color: silver; 


d-tolor 
Sir Toal 
o, to specify а color by name, just type the color name as the value 
of the property: CSS color names are case-insensitive, so you can 
type silver, Silver; or SILVER, and all will work. Here are the 16 LG Yellow 


asc colors in CSS, Remember, these аге just names for predefined = 


amounts of red, green, and blue 


inte pi 


or in a book happens b 


O, сере, the ght en 


alors wl look sty if 


using rgb valu 


Specify color in red, green, and blue values 


You can also specify a color as the amount of red, green, and blue. Бо, 
say you wanted to specify the orange color we looked at a couple of 
pages back, which consisted of B01 red, 40% green, and 0% blue 
Here's how you do thar 


body ( 
background-color: rgb(80%, 40%, 0%); 
^ 
П [ мл 


Md Des get the percentages for 


A vab", short d ble within parentheses 


төй green 


for ved, green blu $ " 
: ard with a K айе eaeh one 


asa numeric value 


You can also specify the red, green, and blue va кбй бы 


between and 23 Во, instead of 80% red 10% green, and 0% Be 
уо cam ме 204 ed, 102 green, and Û bue < 
body | 


background-color: rgb(204, 102, 0); 


) NS Kl reh 


We sill star wth gh 


demon . 
Dumb Questions 


О: Why are here two аниге ways о specify rgb vanes?) never se anyone use rgb or actual color names in their 
Dont percentages seem more straightforward? css It seems everyone uses the S dess уре of color codes 


Д: золу aro nore грими, sine: sng percents or rumete aie ting nore 

sity шшр ито мша . colmo BULU ae i N coer мий e тон ida ad 

шим numba o valaas al cas bo N ^ bans pepe ose a comer way ишу c 

So, or ore and cinica eso, Zi solenni Cy. 

ol measurement lor specljing re, ушп, ard bua values acolar. СУ: 1s t important that be able to look at something ike 

їз, you might have cad hal telê eating appkeatons вет уйд, S0, 200) and know wha colorc? 

Sow yau 1o spa vast O 255 т, you e how 

тс hal or) Az not atat. me besi way oko кагды, s0, 200) looks 
ikl o load tin уш orari nie cr pcr ¢ phan 
bebe va 
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Specify color using hex codes 


Now let 
digits of a hex code just represents the red, gr 
fist wo digits represent the ted, the next two the green, and the last two represent the blue 
po 


tackle those funky-Jooking hes codes. Here's the secret to them: each set of no 
and blue component of the color So the 


чей, seen nd b. 


Walt a sec, how is " 
or "e" a digit? Those 
are lefters! 


Believe it or not, they are digits, but they're 
written using a notation only a computer 
scientist could love. 


Here's the second secret to reading hex codes: each set of two 
digits represents a number from 0 to 255, Sound familiar?) 
The problem is that if we used numbers, we'd only be able to 
represent up to 9 in two digits, right? Well, not wanting to be 
constrained by something as simple as the digits 0-9, computer 
scientists decided they could represent ай 256 values with the 
help of some letters too (A-F). This is the lexadeinal system of 
numbering or "hex" for short. 


Let's take a quick look at how hex codes really work, and then 
well show you how ta get them from color charts or your photo 
editing application, 
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understanding hex codes 


The two-minute guide to hex codes 


‘The first thing you need to know about hex codes bs that they aren't based on 10 
dicis (O to 9); they're based оп 16 digits (0 to F. Here's how hex digits work: 


2 А Using he yov orly мей a snl 
з diy b tat al the way From 
O 4015 When yo get Ae 
2 Yer start ie letters 
o 


So if you see a hex number like В, you know that just means 11. But what does ВВ, 
for El, or FF mean? Let’ disassemble a hex color and see what it actually represents 
In fact, here's how you can do that for any hex color you might encounter 


Step one: 
Separate the hex color into its three components. 
Remember that cach hex color is made up of a red, green, and blue component. 
"The first thing you want to do is separate those. 


OTe yor her calor nd 


break it u into its red, 


# CC 6600 “rr 


JI 


cc 
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Step two: 
Convert each hex number into its decimal equivalent. 


Now that you have the components separated, you can compute the value for 
cach from Û о 255. Let's мап with the hex number for the red component 


Ры! 
Y 


4 ıe the dete 
numbers together 


Step three: 
Now do this for the other two values. 


Repeat the same method on the other two values. Here's what you should gee: 


cc 66 00 


3 V 4 TE шын 00 yos hate 
204 102 0 о 


Step four: 
There is no step four: you're done! 
Thats it. Now you've got the numbers for each component and you know 
exactly how much red, green, and blue go into the colar, You can disassemble 


any hex color in exactly the same way. Now let's see how you'll usually 
determine web colors 
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using a photo editor for web colors 


Putting it all together 


You've now got a few different ways to specify colors, Take our orange 
color that is made up of 80 blue. In CSS, 


i red, 40% green, and 0° 
we could specify this color in any of these ways: 


body ( " 
background-color: er (808, 405, 08); ifi 

D 2 

body ( Ds 
background-color: rgb(204, 102, 0); sey the à 

body { سھ‎ 
background-color: #еебвоо; - Sperify ving a hex 

П 


green and Be 


4 red, green 


де stale O- 


How to find web colors 


The two most common ways to find web colors are to use a color chart or an 
application like Photoshop Elements. You'll also find а number of web pages that 
allow you to choose web colors and translate berw 


db and hex codes. Let's 
check out Photoshop Elements (most photo editing applications ofer the same 
functionality). 


Color Per 


Mast. phate editing Select foreground color 


ма Yo to 


pne 
nally cheote your telor 


by ing one or mare £ 


law you to idet >) 
nl ee 
Calor. Wel tale 


about Bi m à set 


Once уо picked 
a tolor, e teer 
picker vil dew you 
*. 


e: and a 
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Using an online color chart 


You'll also find some useful color charts on the | 
Web. These charts typically display web colors | 
that are arranged according to а number of 

different criteria with their corresponding hex 
code, Using these colors is as easy as choosing 
the colors you want in your page and copying 
the hex codes into your CSS, | 


Тї бф и налівай by Wikipedia a 
ete [env eha e i/i tar 
Yel ae fra many thereby seeing || 
for HTML tolor thnks 


Tey ovt the detis 


rame bee i it works a 


sere brewers (Fit 
doen't, then uue the hex | 
tode instead 


dea no 


Questions 


Dumi 


О: heard that it don't use wast colors, my pages win 
novar оок right on other browsers, Why havent we aed about 
маан colors? 


DA Back inthe ety daye o wab browsers, on peopl had 
‘computor screens that supported a lot af colors, so the wab-sate 
Palette ot colors was created to ensure that page looked consistent 
эп most displays. 


Today the pictura has changed drastically and most web users have 
computar displays that support millons of colors. So, unless you have 
a special set of users at you know have inte color displays, you 
can pretty much count wl sae colors as a thing of ho ра. 


I know hou to specify colors now, but how do choose 
{ont colors that work well together? 


nada take an entre book to answer that question properly 
but here are some basi guidelines to selecting font colors. The 
тов importants out colors wth high contrast or the text and 

the background lo aid readabilty. For instanca, black text on a while 
background has the highest сока. You dont always have to stick 
with black and white, but do ну to use a dark hue for Ie tant, anda 
light hue for he background. Some colors, when used together, can 
ato stange visual elects ik blue and orange, or red and green), 
‘so ry your color combinatens out on some tends before launching 
than on the wor 


— codes Ike et what does tat mean? 


A. чыткан to use stant ach wos pt stares 
asan muntar So rra et cr rd 
NC 
е зыт Honour 
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put your hex skills to tho test 


Crack the Safe Challenge 


Dr.Evels master plans have been locked away inside his personal safe and 
you've just received а tip that he encodes the combination in hex code. In fact, 
зо he won't forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply conver his web color into its red, 
green, and blue decimal values, and youll have the right-eftight numbers of 
his combination. Here's the background web color from his home page: 


Body ( 


background-color: #81720; 
D 


Crack the code, and then write the combination here: 


RIGHT. ошто RIGHT 
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Back to Tony's page. Were going to make the 
headings orange, and add an underline too 


Nov that you know all about color, its time to add some color ta Tony's web page. He wanted. 
orange, and he's going to get orange. But rather than making all his text orange which would 
probably be unattractive and hard to read against a white background. we're going to add a subtle 
n his headings. The orange is dark enough that there is good contrast between the 
text and the background, and by color-coordinating with the orange in the photos (Tony's shirt, 
ating a color relationship between the headings and the photos that should tie the images 

and text together And just to make sure the headings stand ош and creat se 

akso add ап underline to each heading, You haven't 
underline yet, but let's do it, and then we'll ook at more about text decorations. 


splash of colo 


how to add an 


Here аге al the changes in the CSS. Make these changes in your “journal.css" file 


агопе-їасе ( 
font-family: "Emblema One"; 
sro: url ("http: //wickedlysmart .com/hfhtmlc: 
Regular.woff"), 
url (http: //wickedlysmart.com/hfhtmlcss/chapterB/journal/EmblemaOne- 
Regular.ttf"); 


,/chapter8/ journal /Enblena0ne~ 


+ 

body ( 
font-family: Verdana, Geneva, Arial, sans-serif; 
font-size: small; Р 

, Weve ng о ate both Ар and <> arange, 2o 

we eng he color property жа shared r 

m, a24 a 
color: #oc6600; 4 les bhe hex code for the orange 8 
text-decoration: underline чач, otherwise һем а 8А, 

t ۴ 

n We ae the beni deter 
font-family: "Emblema One", san: тазу and st ib to deer 
font-size: 220%; 

d ce that ue created ene меч vole or bth 
xi фе l> эч > мдер Ты кэй 
font-weight: normal; pr 

font-size: 1308; 
П 


blockquote ( 
font-style: italic; 
П 
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testing heading 


Test drive Tony’s orange headings 


(Once you've ade the changes to your journal a= с - 
tar Eto he ele propery tote hi, EK з 
‘ond he we page and chee he el, — 
„ Ae, 
Now both cls ad A - 
penne Te be m d] wh 
ere bee na aa 
The hen ne sl dt Farther with der i 
кае б бо enl a ed oy be E 
n Gee Etat Bey een tint V | E 
a . cei c die e r que tnd er dit 
ak aiu edad i a uch a 33 
ere hve Бо a bad ete 5 
Lats ely ed sme oh ert, Hearse 


deter ston. Ehen we'l reconsider Ө 


underline: in the web page 


A 


What do all these colors have in common? Try each one ina web page, say as a font 
сой, ог use your photo editing application's color picker to determine what colors 
they are by entering the hex code into the dialog box directly. 


diiniii 444% #777777 daaaaaa  #dddddd 
#222222 #555555 (888888 — fbbbbbb  #eeeeee 
#333333 #666666 #999999 ^ йсссссс 
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Everything you ever wanted to know about 
text decorations in less than one page 


Test decorations allow you to add decor 


с effects to your text like 


nderlines, overlines, 


and linethroughs (also known as a strikethrough). To add а text decoration, just set the 


text-dacoratton property on an clement, ike this: 
end 


) 


text-decoration: line-through; Р 


This ede vil ie the 


чөө clement to have 3 


Ine voa Ehe middle 
of the tert 


Yon сап set more than one decoration at а time. Say you want underline and overline at 


the same time you specify your text decoration like this: 


text-decoration: underline overline; 


) 


EN Tis nde ven 


clement having an underline. 


AND ove 


And if you have text that is inheriting text decoration you don't want, just use the value “none”: 


ES 


With Өш rule, <en> elements 


vll have vo detoribon 


— 
Dumb Questions 


О; soit have to diferent rules for an can, and one 
specs overline and the other underline, wil hey be added 
Together so I get both? 


2 Ао You need to combine te vo values into ane rule to get 


bath text decorators, Oniy one rule is chosen for he text-decoration, 


‘and decorations in separate rules ara not aded together. Only the 
fule tnat is chosen tor he text-decaraben styling il determine he 
“decoration used, so the only way 1o goto decorations is to eh 
them both in tha same ext decoration declaration. 


О: tve been meaning to ask why the color property int 
pe 


Д: mecer ony тыу conto ha rund coran 
Lio Lenin en border celor, tough you can 
he arder ls oun colo wi a dtr propery, 


О: iie the inathrough decoration. Can | use i on etm 
fing to indicate tnings tnat oes to be deleted? 


You cul, but there's a better way. HTML has an element 
we Haven aed about caled «de» hat marks content п your 
HTML as content that should be deleted. There в а similar element 
‘caled <ins> that marks content Ia should be inserted. Typically 
browsers wll style thse elements wih а stikabveugh and underine, 
respectively. And with CSS, you сап style hem any way you Ike. By 
using <del> and <ins>, you are marking he meaning of your contant 
Inaddtion ta sying t 
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using a border instead of an underline 


Removing the underline... 


Let's get rid of that confusing underline and instead add 
a nice bottom border like we did in the lounge. To do 
"hat, open your "journal ss" file and make these changes 
tothe combined h1, h2 rie 


Ааа a border on the bottom of the <> and 

С <> cements. Yos tan mest read this lite 
ngs "add 3 in, dotted Ime vith the 
alr #000000 de bottom border" 


ы, а 1 

color: #есвв00; FERAE) е 

— | р Әс бана wa are ig Cr 
مودو ومر‎ borders in detail. Hang on weve almost Бен 

t 
Delete be tert desertion 
And here's how our new “underline” look : : 

IDOD bl 
definitely more ауы and less config — ——— E 


than a test decoration underline. 


Now weve got borders under the l> 


and А0 element not onder Documenting my trig around the US оп my very own Segway! 


7 3 august 20, 2012 


rb eed дс 
x rather thin 
pec 


5| Segway'n USA 
кш tat 
е end oF the pr 
bee the tet Wi? 
Tie vet date 
С | Wall 1 made е 1200 miles already, and 1 passed through some 
interesting places on the way: 
з Walla Wala, WA 
122 
Bon 
комн, co 
‘anor Corus, NM 
шы 


July 14, 2012 
1 saw some Burma Shave st signs on the side of the road today: 
Passing cars, 
When you can't see, 
Mey get you, 
КА 
Ferrey 
1 defintely wort be passing any cers, 
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CSS gives you lots of control over the look of your 
onis, including properties ке font-family, font- 
weight, font-size, and ont style. 


aten: family is a sel of fonts that share common 
characteristics. 


“The font families for the Web are serif, sans-serif, 
monospace, cursive, and fantasy. Serif and sans- 
serif fonts are most соттоп. 


“The fonts that your visitors wil see in your web 
page depend on the fonts they have installed on 
their own computers, unless you use Web Fonts. 


Иза good idea to specify font alternatives in your 
“font-family CSS property їп сазе your users don't 
have your preferred font installed. 


Always make the last fonta generic font Же serit 
‘or sans-serif, so that he browser can make an 
appropriate substitution if no other fonts are found. 


Touse a font hat your users may not have 
installed by default, use the ght fre rule in 
css. 


Font sizes are usually зресбей using px, em, %, 
or keywords. 

Ifyou use pixels (px) to specify your font size, 
youre teling he browser how many pixels tall to 
make your letiers. 


em and % are relative font sizes, so specifying 
your font size using em and % means the size of 
е letters wil be relative to the font size of he 
parent element 


Using relative sizes for your fonts can make your 
pages more maintainable. 


Use the font size keywords to set he base font 
size in your body rule, so that al browsers can 
scale the font sizes if users want the text o be 
bigger or smaller. 


You can make your text bold using the font-weight 
CSS property. 


The font-style property is used to create talic or 
oblique text. talic and oblique text is slanted. 


Web colors are created by mixing diferent 
amounts ofred, green, and bue. 


I you mix 100% red, 100% green, and 100% blue, 
you wil get while. 


Ifyou mix 0% red, 0% green, and 0% blue, you wil 
get black 


CSS has 16 basic colors, induding back, white, 
Ted, blue, and green, and 150 extended colors. 


You can specify which colar you want using 
percentages of red, green, and blue, using 
numerical values of 0-255 for red, gren, and blue, 
or using a colors hex code. 


An easy way to find the hex code of a color you 
wants to use a photo editing application's color 
Picker or one of many online web tools. 


Hex codes representing colors have six digits, 
and each digit сап be from 0-Е. The frst two digits 
represent the amount of red, he second two the 
amount of green, and the last мо the amount of 
blue. 


You can use the text-decoration property to create 
an underine for text. Undefined textis fin 
confused as inked text by users, so use this 
property carefully. 
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HTMLeross 


F 
time to do another crossword and let it all sink in, 
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Across Down 

1. Similar fonts are grouped into _- 1. Font family almost never used in web pages. 

3. Use the __rule in CSS to load fonts from the Web. 2. Browser that doesn't handle pixel font sizes well. 

4. When you specify fonts in the font-family property, you — S. Hex codes use tis many diferent digits. 

are specifying- (7. Fonts with litle barbs on 

S Considered cleaner and easier to read on a computer 8. Colors e #11111 tough #EEEEEE are all shades 


disp. 
E You can peril tantsin tams ol piel, ene. , 1 Coo how bold a font loots: 


12. Underline and linethrough are examples of text  . 11. Element that can be used to mark text for deletion. 
13 em and % are both this ind of size. 
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e Font Magnets Solution 


E Your job was to help the tional fonts below find ther way 
home to their own font family You moved each fridge magnet 
into the correct font family. Check your answers before you 


Û moveon Heres the solution 


Monospace family Fantasy family 


Messenger 
Bainbridge 
Cursive family 


Sans-serif family 


Iceland 


Serif family 
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Crack the Safe challenge Solution 


Dr. Evels master plans have been locked away inside his personal safe and 
youve just received а tip that he encodes the combination in hex code. In fact, 
зо he wont forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply conver his web color into its red, 
green, and blue decimal values, and you'l have the right-ftight numbers of 
his combination. Here's the background web color from his home page: 


body ( 
background-color: #81720; 
D 


Crack the code, and then write the combination here: 


wanes ажш+т 
RIGHT, lêt LEFT 23 


пажо 
nichr. 224, 
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sil 


What do all these colors have in common? 
You can try each one in a web page, or use 
the color picker to determine what colors 
they are, by entering the hex code into the 
dialog box directly. 


nni 
#222222 
1333335 
m 
4555555 
#666666 
amm 
тавввва. 
#999999 
fazaaaa 
К 
p 
Hadad 
Hececee 


— 
hes tad 

From very dark 
ТЬ very light 


HTMLeross Solution 
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H 
D 
T 
E 
в 
N 
E 
T 
E 
x 
Р 
t 
o 
в 
E 
в 
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9 the box model 
+ * 
Getting Intimate 
with Elements 


+ 


I think wed be a little 

closer if it weren't for all 

the padding, margins, and 
‘tis darn table, 


To do advanced web construction, you really need to know 
your building materials. in this chapter we're going to take a close look 
at our building materials: the HTML elements. We're going to put block and inline 


elements right under the microscope 


ıd see what they're made of. Youll see how 
you can control just about every aspect ol how an element is constructed with CSS. 
But we don't stop there—you'l also see how you can give elements unique identities. 
And, if that weren't enough, you're going to learn when and why you might want to use 


multiple stylesheets. So, tum the page and start geting intimate with elements. 
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what we're going to do with the lounge 


The lounge gets an upgrade 


You've come a long way in eight chapters, and so. 
has the Head First Lounge. In fact, over the next 
two chapters, we're giving it a total upgrade with 
all new content for the main page and restyling 
from scratch. And, just to entice you, we're going 
to give you a little sneak peck before we even 

get started. Check this out—on this page, you'll 
find the new unstyled lounge page with all the 
new content. On the next page, you'll find the 
stylized version that we're going to create by the 
end of the next chapter 


The lounge soy have ped a 
lot of new ert describing the 
lange and shat it offere 


РРР 


cli peti fur the ved SX. 


м 


And Bey even let visitors чере tone of the 
mese Dat а played in he lounge eath week а 
pd 


Finally, thee go sone legalese in the 
ker of the pase wth a copyright 


^ 
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the box mode! 


Whats playing ot the Lounge 


Wese set ean bak wath Ue e. 
tar беч a parame The fs 
Sroka ay eae aen 


“This paragraph hae been highly syed, 
hich helps sek Hoff From the tet ard 
gives the pane an attractive look. [E alo 
leeks lke the Font жа serif Fent, which а 
different from the main tert 


“The dier have been 
bramabally restyled nko an 
Бен берәү of c. 


MIL The дит have dio been moved ever be 
De ide How did that aper” 


The new and improved, 
ultra-stylish lounge 


Not too shabby: Now the lounge design 
‘might bea tad on the, well, “ultrastylish” 


side for you, but hey iis lounge. And. 
жете sure that you can sce this design is 


The mite CDa and artists Wd the foter i staring to look downright sophisticated — 
are tiled voe b. toed d dipa just think what the same techniques could 


do for your pages. Well, afier this chapter 
and the next, designs like this are going to be 
easily within your reach. 
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starting with simple styles 


Setting up the new lounge 


Before we start the major construction, let's get familiar with the new lounge. 
Here's what you need todo: 


Ө Aske look at the “chapter lounge" folder and yw find the fle ong” 
‘sth ай new contem, Open th lei your ditor and have а look aroun Everything 
‘hook fli: hend, amg n few ima dw Bt. 


Ө Youre going to spend most of this chapter adding syle to this HTML, so you need a 
place for your CSS, You're going to create all new ук for the lounge in the stylesheet 
%% clement in the <head>: f "unge m 
sil ther, bar ie potiou aeon of "lounges bier рик, 


<link type="text/css" rel="stylesheet" href=" lounge.csa"> 


Remember, this c kc element tells the browser to look for an external stylesheet called 
"lounge cs" 


Ө х you ned io create the new lounges in the “chapter lounge flde This eis 
ung to hold all the new CSS far dhe new lounge 


Starting with a few simple upgrades 


Now you're all ready to start styling the lounge. Let's айа a few 


rules to your CSS just to get some basics out of the way—like the 


font family; size, and some colot—that will immediately improve 
the lounge (and give you a good review from the last chapter) So, 
орев your “lounges file and add the following rules 
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Here's the deft font 


ine for the pa 
body ( صر‎ 


font-size: етап; 
font-family: Verdana, Helvetica, Arial, sans 


i 
Ro Wre gang te go ith a ше 
м, 2 4 


Family for the lo 
color: #00707 


] sS 


Vere pahed a few 
Font alternativet, and ended the dec 
Û the generit меен Font 


ж N Weve gong ta sek the color of the АК and «> 
EN elements bs an amavit to match he sas inthe loo 

) N 

* 4 N Now els gek some eee heading sizer for al- and <h2> 
font-size: 1308; — QUA Swe vere setting tno different sizes for thee, we need separate 

П vale and can't add them to the eonbned vale for <h> and A> 
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A very quick test drive 


Let's do a quick test drive just to see how these 


tle айга the page, Make sure you've made all he 
Changes then sve and tet. 
m3 
and à tolor that matches N 


te lego, creating 2 theme 
for the page 


Paragraph kest iı abo anisi y 


sine every element inherits he 
Аар font-family property: 


The AL heading и ale 


styled with a nev eer эд 
sans-serif, but a tad wale NS 


We haven applied any styles 


to the <b>, ы ust inherits 
the font-family property 
Fram bed > 


One more adjustment 


We're going to make one more adjustment to the 
lounge before we move on to start making some bigger 
changes, This adjustment involves a new property you 
haven't seen before, but at this point, you've got enough 
experience under your belt that we're not going to treat 
уой with kid gloves every time a new propery comes 
along, So, just jump in and give it а пу 

Here's what we're going to do: we're going to adjust the 
line height of the text on the entire page so that there's 
тиге vertical space between each line. To do that, we 
adda 1ine-height property in the body rule: 


body “ 
font-size 


РЕН 


the box mode! 


тув nk lod адау ont of ne 
ith is default ble tolor, Melt 
ave bo fn tht late) 


кему the line height of your tet 
ton wpe ташын | al er 
po ler ay te pride tnd 
eas different ports of yoor М 
Gol wee bow Bal warts 0 


Here we've Changin the space beween each ire te | hen 
în other vards, 1 bimes the font ize 


font-family: Verdana, Helvetica, Arial, sans-serif; id 


line-height: . Ces. 
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learning about lino height 


Checking out the new line height 


As you might have guessed, the 1ine-hetght property allows you to specify the 
amount of vertical space between each line of your test. Like other font-related 
‘properties, you can specif the line height in pixels, or using an em or percent 
value that relative to the fnt size, 

Let'ssee what the eflect of the eue ght property is on the lounge. Make 
sure you add the line-height property to your CSS file and then save. You 


should see the line height increase when you refresh, 


Using бе line-height property, we've 
increased the spite between cath line of 
tent fron the default to [bem 


Before 


| 


тмн betwen nes ^ ме 
OR 
need "ийди = 

P "— 1 


he potins 
a Inches property 


setting itn the body all the clemer 
aye now havea line height of kem 


inherited, se by 


ту a few diferent values for line-height, ike 200%, Sem, and 20px to see he 
A effect Which looks the best? The worst? Which is most readable? When you're 
Exercise бопе, make sure you change the line-height back to 1.бет. 
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һе box mode! 


Getting ready for some major 
renovations 


After anly а few pages of this chapter, you already have a ton of 
text style on the new lounge. Congrats! 

Now things are going о get really interesting, We're going to 
move from changing simple properties of elements, like size, 
color, and decorations, to really tweaking some fundamental 
aspects of how elements are displayed. This is where you move 
up to the big leagues. 

But to move up to the big leagues, you've got to know йе box 
model. What's that? ls how CSS sees elements. CSS treats every 
single element as if it were represented by a bax. Let's see what 
that means, 


Every bet i made up of a 
к менне Gem Content area aon with optional 


iener i a be ү Padding, border, and margins 


The content area holds the 
content: (tent or an mage, for 


instance, 
[ошай о providing youa our ues 

wih ge e eee The content area need 
eme yu vt Whether you're pn. by optional transparent paddling 
he eer check pind 

lii or wre are Brn 

dle dase youl nd our 

eker serv чай рау atento. 3 An optional border can be 

ba very detail Г you've mot ly aie plated around the padding 


Ives Bhrberr Ho» Elixir m ws 


td Fly an optional 
tränaren ану, 
Sranda everyting 


All elements are treated ac beter 
paragraphs, headings, bleek ole 
Tats, Tt йом, ard 20 on Even ine 
elements lite <em> and ks are 
treated by CSS э bones 
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the box model up close 


A closer look at the box model 


You're going to be able to control every aspect of the bos with 
GSS: the size of the padding around the content, whether or not 
the element has a border (as well as what kind and how large), 
and how much margin there is between your clement and other 
elements. Lets check out each part of the bax and its role: 
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What is the 

content area? 

Every element starts with some 
content, like text or an image, 


and this content is placed inside / 

a box that is just big enough Ме draun one 
to contain it, Notice that the end the content 
content area has no whitespace be 
between the content andthe bobs t= Bet ma 
edge of this box tense, there i eer 


dhe content area 


The browser adds 


What is the padding? 

Any box can have a layer of padding 
around the content area. Padding is 
optional, во you don't have to have it, 
but you can use padding to create visual 
whitespace between the content and 
the border of the box, The padding 

is transparent and has no color or 
decoration of its own, 


the padding атана the 
à 
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sri to che in om ema net 


The cmm lhe denn 
tml ee ope уд Va oh 
OM Ue eet 

Y 


TEESE 
навів to providen уа. бш guest 
[ibam empta agir mer 
= you cit. Whether yore Jort 


ei aae here fr mt oe 
. yo id our 
.. sal рү atento 
im every detail Ir улгт ин lly e 
—— 


timal padding arand 


[Os paste: и egy, we 
ший to proving you our пен, 
Кш енуш! сертин cry 
ae yu ye Whee ye jn 
erp ye skin cn ond bat 
an lic or arc ve ix — 


"beconksary dames yu fd our 
.. ирмей 
aer dei. Г yon'e жи fl aide 
Erez Hz Lii m uc 


«sdb of 


ling on any one side (lap ht botton, orl 0) 


the box m 


Notite that the padding 


Fron the border 


What is the border? 
Elements can have an optional 
border around them. The border 
‘surrounds the padding and, 
because it takes the form of a 
line around your content, provides 
visual separation between your 
content and other elements on the 
some page. Borders can be various 
widths, colors, and styles, 


What is the margin? 
The margin is also optional and 
surrounds the border. The 
margin gives you a way to add 
space between your element 
and other elements on the same. 
page, If two boxes are next to 
each other, the margins act as 
the space in between them, Like 
padding, margins are transparent 
and have no color or decoration 
of their own. 


This а the entire element: We have à 


mtenk aed, creed by option 


. —— 
e eee tadak aa 
Border pO |ime ou vit Werne just 


ling, этеди) by an 


ded by an өрен margin 


oppi by to check iom eral ener 
— — 
. oul Bel ow 


plea serie ай pay tenn 
play seta И youve no aly stil 
then Blueberry Hi Ee 


sping to be able te contral 


v. 


Dar иштин ate 


bree ones ye ede 
tears Bh fie Hiro uc 
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how boxes сэл be configured 


What you can do to boxes 


"The box mode! may look simple with jus the content, some padding, a 
order, and margins. But when you combine these all together; there 
are endless ways you can determine the layout of an clement with its 
internal spacing (padding) and the spacing around it (margins). Take a 
ook at just a few examples of how you can vary your elements 


Boxes 


You tan style a box to 
have padding a border, 


aae 
D ortas have sehid i 
borders Bite or thin 


Or na berder ak al 


— 


Dr trosse from 
taht different 
styler of herders 


Me dashed Уу 


Oy toler: your 
orders 
=> 


Or a hardin ith 

vo border and no 

padding 
Or even tre 
vended comers 
on yor borders 
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Yo tan een entre 
Де aad he in a 
rely of wap Bee 
ihe content area bat 
been nade wide 


the box mode! 


With CSS, you tan 
contra padding on ary 
side of the content 

area Here weve got a 


Yon have the ame 
led of control over 


бе mings Hee 
Кырык ызыны 


мә and bottom margin 
x es 
fd hee there a ot of 

tap and bottom padding 


Prd heres ot of 
lef and ight margin 


— 


ha here the 
token ie 
аы 
bottom ight oda with ding 
vith padding m orton ey al 
dere, eee 


— pd 


p 
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зоте details about boxes 


therojare no 
Dumb Questions 


Oi it seams le knowing this box 
would be important ifi were 
Someone creating the software fora 
web browser, but how is this going to 
help me make better web pages? 


Д: зьн 
hal uso Ве rower Setaun aout 
You need be ab a conl how 
aments sl on D page, as vel she 
тишне posto of oher lemen To do 
that you ter aus spes o ach 
nens padng and mans So 
trate teresting eb page desans: 
You dent neo know something 
ои Pe Box modal 


7 Whats the difference between 
padding and margin? They seem like 
the same thing. 


A: merona pote mare 
——— 
Son nene. 
— hte 
eee. 
Tanten gm 
коош: erde 
Fest vit rere 
— one 
по 


S 
Soei ni 


AA sonat 
ааш ы Drs 
r 
— ا‎ 
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О: m not sure get how elements 
дыг out and how margins fit into 
that 


А: vat ag ite ys 
ing sae a ео hou margins 
таа wi other elements in ths 
chapter well get way Into is tople 
in Chapter u mhen we tak about 
К 


[T 
Vicar ret pg 
Ere: 


— tota 
иней о proide тие visual space, and 
You cart give the patting or magn a 
Яг се or any tind al eran, 
But because hoy are transparent, hay 
wil take on tha color of ay backround 
Cols or backround mages. бле 

derence between padding and margins 
is hal he element's background color 
(cr background imaga) wil exten undar 
‘he pading, bul nat the margin. Yo 
seo how ба works in abit 


Hey guys, love the shop talk, 
really до, But did you forget 
you were in the middle of 
renovating the lounge? 


О: is he size of the content area 
delérmined solely by the size of the 
content in 1? 


А: ваннаны 
КЕТ 
Siue минет egal 
tini шг a типан 
— py) 
— aonni 
— ийнин 
Seeed P sl 
ee 


the box mode! 


Meanwhile, back at the lounge. 


We do have our work cut out for us on the lounge page, so let's get back ta it. Did you notice 
the blue, stylized paragraph when you looked at the final version of the lounge page in the 
beginning of the chapter? This paragraph contains text with the lounge’s guarantee to their 
customers, and obviously they want to really highlight their promise. Let's take a closer look 
at this paragraph, and then we'll build it. 


Ты туар tar a 
rs nd 


Notice the The tert i offset 


тауа eke be- the border ggg rer 
ызы . —— 
Theresa афа, Z 
e — ИЙ 
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Working through padding, borders, and margins 


n your pencil 
See if you can identify the padding, border, and margins of this paragraph. 


Mark all the padding and margins left, right, top, and bottom]: 


don't forget, the lounge offers free wireless access to the 
Internet, so bring your laptop. 


m 


But that's not all; at night, join us in the backroom as cur 
resident D3 spins a choice solaction of trance and drumabass 
beats across our spacious tikicthemed dance floor. Or Just han 


weran 
POWER 


Before going on to the next page, think about how you might 
use padding, borders, and margins to transform an ordinary 
paragraph into the "guarantee paragraph." 
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the box mode! 


Creating the guarantee style 


Let's get started by making а few small changes to the style of the g 
Paragraph just to get а fel for how the paragrapl's bos is set up. To do that, 
you're going to add the paragraph to а class called guarantee so that you can 
create some custom styles for just this paragraph. You re then going to add a 
border along with a litle background color, which will let you see exactly how 
the paragraph isa box. Then we'll get to work on the rest of the syle. Here's 
what you need to do: 


© Open your “lounge hm! file and locate the paragraph that starts 
"Our guarantee" Add а class attribute “guarantee” To the element like this: 


nd 


Ма the ds at 
Remember, a ба will allow you t style Uis paragraph 
independently ef the other paragraphs 


<p classs'guarantes'o 
Ош: quarante 
you, our queat, with an exceptions 
visit. Whether you're just 


at the lounge, we're committed to providing 


experience ever 


time you 


ek їп on email 


over an elixir, ar are here for an out-of-the-ordinary dinner, 
you'll find our knowledgeable 


rvice staff pay atter 


on to every 

detail. If you're not fully satisfied, have a Blueberry Bliss 
lixir on ua 

<> 


Ө Sove your “lounge htm file and open the "lounge css file. Youre going 


To add a border and background color to the guarantee paragraph. Add 
the following CSS to the bottom of your stylesheet and then save, 


The Ft thre торове ad a border te any 


IS eme the gavartee cass So far, 


ek Dis paragraph 


guarantee ( 


border-color: black; o 


Were making the color of the border black 


ard ore pive tick 


border-width: 1px; — 
pod 
background-color: #а?сесе, m 
n TK чїч yo see the Песма bebueen padding ard 


margins and make the guarantee lock good 
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a first cut on paragraph styling 


A test drive of the paragraph border sie" 


Reload the page in your browser, and you'll now see the guarantee 
paragraph with an aquamarine background and а thin black border 
around it, Let's examine this a litle more closely 


E doesn't lack Ше the paragraph has any 
Padding around the content -there в no 
spate bebween the Eent and the border 


But thats no all; at ight Cn ye the wee as our resident D spins a choice selection of 
Vance and drum oes bys pes our spacious td themed dance floor Or jst hang aut mone |f 
Марнини, 


“There in't ble nrg ЫЫ 
But thee dots seem bo be margin an the br e let and right edges of the 
ad bebin of the rapa len Trays ond Bhe bee sides ee 


Here's what the paragraph would look like if we drew it 


e We've gek a e and bottom margin 


But the left ard visht ‘And we have à border, but its vight uF against the content, whieh 
mange are very nal аз the padding ie te ver] small or there's ra Yadding aÈ a 
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the box model 


Padding, border, and margins for the guarantee 


Now that you've seen how the padding, border, and margins are 
currently set on the guarantee paragraph, let's think more about 
how we'd actually like them to look, 


We definitely verd tome padding 
al around the content 


Wéve do sin to need 3 fod we want some more margin 
sighty different border spate around the paragraph 
“This border looks ragged, 


rot lke a чїй ne 


Adding some padding 


Let's star with the padding, CSS has а padding property that you can 
use ta set the same padding for all our sides of the content. You can. 

ч this property either to a number of pixels or a percentage. We'll use 
pixels and set the padding to 25 pixels 


guarantee ( 
border-color: black; 
border-width: 1px: 
border-style: solid; 
background-color: #а7сасе, Weve adding 25 pixels of padding 
do all ode of th conter 
; asap € teal dex of he content (i 


Fight ын, and ef. 
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testing the padding 


А test drive with some padding s3 


When you reload the page in your browser, you'll notice the text 
in the guarantee paragraph has a litle more breathing room. 
fn the sides пон: There's some space between the text and the 


bordes and it's much casier to rad, Notie that the ber- 
talor и under both бе content 
Nom you tan see 25 рне of spate beben the and bhe padding But it doemt 


edge of the tent content and the border erkend into the marge 


the relaxing senuments of sights from eras|past, And, don't forget, the lolinge offers free wireless 
access to the Internet, зо bring your laptop. 


But that’s not all; at night, jon us in the backroom as our resident DI spins a choice selection of 
trance and druma&bass beats across our spacious tiki-themed dance floor. Or just hang ош in one of 


Now let’s add some margin 


Margins ate easy to add using CSS, Like padding, you can 
specify the margin as a percentage or in pixels. You're going to 
айй a 30-pixel margin around the entire guarantee paragraph. 
Here's how you do that 


guarantee ( 
border-color: black: 
border-width: ря 
border-style: solid: 
background-color: faTcece; 
adding 25px; . 
— doge «7 Here adding 30 pod of marn bo all ade of the 


Content Cte, ight, botton, ad lef. 


378 Chapters 


www it-ebooks.into 


the box model 


A test drive with the margin == 


‘When you reload the lounge page, you'll see the paragraph i really beginning to 
stand out on the page. With the margins in place, the paragraph looks inser fom 
the rest of the text, and that, combined with the background color, makes it look 
‘more like а “callout” than an ordinary paragraph. As you can see, with only а few 
lines of CSS, you're doing some powerful things. 


Now we have 30 рие of margin on all sides 


the relaxing sentiments of sights fig ef Ss past. And, доти) to det, the lounge dite & free wireless | 


| But that's not all; at night, join us in the backroom as cur resident DJ spins a choice selection of 
(trance and drumabass beats across our spacious tiki-themed dance floor. Or just hang aut in one of | 


yeu look at he guarantee paragraph as їз supposed to lookin ts па fm, 
> ias an tali, sent font. a ine height greater han he est of the page, and (f 
Exercise youre ooking realy dose) gray tet Wit he CSS below to set he Ine eight 
Toe, the font sj toa, he color 1o #444444, апа е fnt ly to 
Georgia, “Times New Roman, Times, serit Check your CSS with the answers 
in he back the chapter, еп pein and test 
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background images 


Adding a background image 


You're almost there, What's lefi? We still need to get the white "guarantee star” 
graphic into the paragraph and work on the border, which is a solid, black line. 
Lev tackle the image first 


If you look in the “chapter9 lounge, 
“background gif” that looks Ше this 


jages" folder, you'll find a GIF image called 


ӨӨ Ө Bobackground.gif @ 100% (index) 


| à simple star-like 
ا‎ 


e against a 
transparent aged Notice 
that # йе hae a mate around 
it that matcher 

De background. 


Now you just eed to get that image into your paragraph clement, so you'll 
be wing an <img> clement, right? Not so fast. IF you're adding an image to 
the backround of an element, there is another way. Using CSS, you сап add 
a background image to any element using the backgroun 


Let's give ita try and see how it works: 


ша 
guarantee “ in the exertie өк te resins fe. 
— 2 
font-style: ede, 
font-family: 
pei 
border-color: black; 
eden, is, 
border-style: solid; 
background-color: балек) 
padding э; 
margin: зор; 


меске 
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like we have two ways 

о put images on a page. ke 

background-image a replacement 
for the «img? element? 


No, the bı 
a very specie purpose, which is to set the 
background image of an element, Isn't 
for placing images in a page—for that, you 
definitely want to use the <img> element, 


iqround-image property has 


Think about it this way: a background ima 
is pure presentation, and the only reason you 


would use a background-image property is 
to improve the attractiveness of your element. 
An <img> element, on the other hand, is used 
to include an image that has a more substantial 
role in the page, like а photo or a logo. 


Now; we could have just placed the image 
inside the paragraph, and we could probably 
get the same look and fel, but the guarantee 
star is pure decoration—it has no real meaning 
en the page, and it's only meant to make the 
element look beter, So, backa; 
makes more sense 


the box model 


E: 


more about the background-image property 


Test driving the background image =т= 


Well, this s certainly an interesting test drive—we have 


а background image, but it appears to be repeated 
‘many times. Let's take a closer look at how to use CSS 
background images, and then you'll be able to fix this. 


mo 
beer de garantie star mane in the ауен 
Nabe that sts өл tap of De dees ean 
эч berane thas а transparent backgroud it 
Кы be cl show Brant 


io notice that backgroud inages hike the ag 
Calor өнү show under the content: area and padding, 
and rot оне the border in the marae 


( Up Close 


The background-image property places an image in the background 
of an element. Two other properties also affect the background image: 
!ckground-position and background-repeat. 


background-image: url(images/background.gif); 


The background image property и set Notite that va quotes are 
to a URL. which can be a relative path теней ene the URL- 
or a libens URL CV 
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the box model 


Fixing the background image 


Ву default, background images are repeated. La 
property. Also, by default, browsers position a 


ly there is a no-repeat: value 


forthe background- 
background image in the top lefi of the element, which is wher 
let's alo add a bı tion property just to give it a try 


ey 
lise-height — 
font-style m 
font-family Georgia, “Times нен Ronan, tines, serif: 
color mo» 
border-color ылә 
border-width эр; 
irane tê sonia: 
background-color: bete 
padding pe 
margin: зр; 
.  url(images/background git) + 
"——  — О с 
. 

| mu» 


the corner «7 


The background-position property sets the position of the image and can be specified in pixels, 
or asa percentage, or by using keywords like top, left, right, bottom, and center 
Places бе mage o Ehe top elt of be denen 
background-position: top Left; тле are many diffrent way futon dg în CSS nd 
TK well be balling more жы that in Бе бәне 


ву default, a background image is "led or repeated over and over to fili the background space. 
The background-tepeat property contras how this tiling behaves. 

радду Ue as mec don't 
no-repeat seal tie may 
cepere eL 


background-repeat: repeat; 


$ the кәк to vei beth Repeat the image өү horizontally 
horizontali and vecta Ths is the repeat-y с _ 


default behavior inherit __ 
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getting more sophisticated with padding 


Another test drive of the background image s3 


Here we go again. This ime, it lonks like we're much. 
closer to what we want. But since this а background 
image, the text can sit on top of it. How do we fix 
this? That's exactly what padding is for! Padding 
allows you to add visual space around the content 
area. Let's increase the padding on the left and see if 


we can пай this down once and for all, 


т и mich better. New 
he mage int repeated, —> 


But wed relly le for 
the kext at o vun over 
the tap of the image 


How do you add padding only on the left? 


For padding, mangins, and even borders, 


58 has a property for every 


direction: top, right, bottom, and left. To add padding on the left side, 


we the padding-left property like this: 


guarantee { 
line-height: 
font-style 
font-family: 
color: 
border-color: 
border-width: 
border-style: 
background-color: 
padding: 
padding-left: 
margin: 
background-image: 
background-repeat 


background-position: 
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bes, 
italie; 
Georgia, "Times New Roman", Times, serif; 


We're wing the padding-left property to 


beer Be aln on e te 
uL. Notice Бай we Fa sek бе padding on al е 


“7 #15 үм, and then we нөнү a property for 


SEE the left side 
url (images /background. gif) ; 

no-repeat; Order matters der- f ү» lin the order, then youl 
top left; sel The padding for the left de First, and then the 


preval padding property will set all ades back to 25 
Fels, кыйн the left side! 
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Are we there yet? 


Make sure you save your changes and reload the 
Page. You should sce more padding on the left side 
of the paragraph, and the text is now positioned 
well with respect 1o the guarantee star. This В а 
reat example of where you use padding instead 

fof margins, И you need more visual space around 
the content arca itself, use padding, as opposed to if 
you want space between elements or the sides of the 
Page, in which ease, use margin. In fact, we could 
actually use a little more margin on the right side to 
set the paragraph off even more. Let's do that, and 
then all we need to do is fix the border 


the box mode! 


ane the 
m 
poni 
pipe 
mere of a "tal! lek 
Ard we still need or be iae 

2 better border. 


Tie add ae eat 
Naw he ftw 

ea coc 
tthe graph, Т 


How do you increase the margin just on the right? 


You do this just like you did with the padding: add another property Z7 See the pattern? Theres a property 


margin-right, to increase the right margin. 


Guarantee { 
line-height: 
font-style: 
font-family: 
color: 
border-color: 
border-width: 
border-style: 
background-color: 


1.9em; 
italie; 


30px; 
SOPE € side, and acti 250 pinete 
‘url (images/background.gi£) ; 


do contra all sides together, ard 
үтенүе far each side f you wart. 
o set them dd, 


Georgia, "Times New Roman", Times, serif; 


Remember, we've already setti 


3 
к the онун be be 30 pe 
Ма we yang tx eerie iat setting б the vajt 


no-repeat 


, 


Add the new margin-right property and reload. Now the 


250 pede 
‘paragraph should have 250 pixels of margin on the right side, PRESS 
— 
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overview of borders 


A two-minute guide to borders 


There's only one thing lefi to do to perfect the guarantee paragraph: 
add a better border. Before you do, take а ook at all the different ways 
you can contro the border of an element, 


style property controls the visual style of the border. There are eight 
border styles available, from a solid line to dotted lines to ridges and grooves. 


border-style: groove 
“To speti à border ste, jast ме 
border-style property and a valse of one 
of the available styles, 


2 


Go with solid, | Тен Once you go 
the original style ods lke > | dotted, you'll 


Te ld style ie 
eb what # шей 
ke a tid border. 


— 


nd the dash 


e gata шге dotted; i 

The деме style Go with sek of dashes тамаа | 

ке buo iner double; Im arand the i i 
twice the бш. border. 


A gre style Tm the only 

leds Ike a үзө >" [Tra he borer | “in syle: 

in he pae has gor the | that sinks ito жеш, 
(йш ee geo безе 

ina bed 

Trendy tye _ 

— esse] Pei аны T mone in 
eae Bat ben bener ee "Зс Dens 


^ Туе got ridges. 
vies fren dee the outset. 
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the box model 


Border Width Border Color 


The border-width property controls |The border-color property sets the color 
the width of the border. You can use ofthe border, This works just like setting 


keywords or pixels to specify the width. font colors; you can use color names, rgb 
values, or hex codes to specify color. 


border-width: thin; ¢ | 


hezdar: ea, 
border-width: Spe: ЕС) 


border-color: ab (100%, Ow, Qu); 
ts ving the fend bin border-color: #££0000; 


X, or by бе number of pete f i 


1px | Use berdertlor 


Yow tan e 


m 


2px Je be lr 
— 3x | аы 
— ax | commen t 
medium m= Spx | rely eder 
— thik — | 


6px 


r Just as with margins and padding, 
border-top-color f border-right-color prae specify! Дух width, 
border-top-style borderright-style | color on any side top, right, 
border-top-width border-right-width 


border-top-color: black; 
border-top-style: dashed; 


border-top-width: thick; 
border-left-color T 


border-left-style 
border-left-width 


order bottom. color 
order bottom style 
order-bottom-widthl 


These properties are f 


www it-ebooks.into 


border corners 


Specifying Border Corners 


You can create rounded corners on all four corners, 
or just one corner, or any combination. 


You tan seil all four corners wih one vomer 


sorder-radiua; aspx; #7 


Or you tan etl cath torner 
separately Noti 


ebe 


border-top-left-radius: 3em; 
border-top-right-radius: 3em; 
— 3em; 
border-bottom-left-radius: 3em; 


1 T 
the border тайын 


Fent size of the clement 


fy the radi size 


when you vse em for fe 


bordar-top-left-radius: 15px; 
SL. bordar-top-right-radius: Ори; 

order-botton-right-radius; 
\ order-botton-left-radius 


Yov tan yet all kinds of interest 4 
dapes vin berder rade 
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Border fit and finish 


és time to finish off the guarantee paragraph. All we need to do is give 
ik a ragged-looking border. But which style is that? The available styles 

are solid, double, dotted, dashed, groove, ridge, inset, and outset. So how 
do we make it look ragged? Ies actually just a trick: we're using a dashed 
order that has its color set to white (matching che background color of the 
pare) Here's how you do it. Begin by just making the border dashed. Find 
the border-style property in your "lounge.cs" and change it, Ше di 


mr 


the border From ssid 
p 


border-style: dashed; 


Go ahead and save the file and reload. You should see a border like this: 


Now to get a ragged-looking border, just set the color of the border 
to white. This makes the border look like it is cutting into the 
background color, Give it а ну: find the bordes -colo* property 
and set it to white. 


YEN hà here we've hanged 
border-color: white; ‘the border color Fram 


Mack to white 


Save the ile and reload again. Now you should see the ragged border: 


— 


Browsers don't always agree on 
the size of thin, medium, and thick. 
5% Browsers can have different default 
Watch it! sizes forthe keywords thin, medium, and 
i thick, so if the size of your border is really 
1 important to you, consider using pixel sizes instead. 
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testing 


Nice! I cant wait to see 

же entire page remodeled, 

Таке a break and have ап 
iced chai on mel 


Congratulations! 
Bravo! You've taken an ordinary HTML 

graph and transformed it into something 
a lot more appealing and stylish using only 15 
lines of CSS. 


It was a long trip getting here, so at this point 
we encourage you to take a little break. Grab 
yourself an iced chai and take a little time to 
let things sink in—when you come back, we'll 
down a few more of the fine points of CSS. 


the box mode! 


CC 

, leve got some examples below ofthe guarantee paragraph um a varity of boder radius values set. 

Exeßcise unte he CSS to create the border you see in the example. For each example, we've provided the size 
ofthe borderradius used to create е rounded corners in that example 


Write your CSS heve 


“ 
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when to use classes 


Welcome back, and good timing. We're just about to listen 
in on an interview with a class. 


Are classes always right? 


Head First: Hey; Clas; you know we've been making good use of you, but we 
still don't know a lt about you. 


Class: Well there's not all that much to know. If you want to create а “group, " 
so to speak, that you can style, just come up with a class, put your elements in it, 
and then you can style ай the elements in that class together: 


Head First: So the class lets you take sets of elements and apply one or more 
style properties to them? 


Class: Exactly Say you have some holiday-themed arcas in your page-— one 
Halloween, one Christmas. You could add all Halloween elements to the 
halloween class and all Christmas elements to the christmas class, The 


сап style those elements independently —iay ora 


we for Halloween and red for 
Christmas by writing rules that apply to each class, 


Head First: That makes а lot of sense. We just saw a good example of that in 
ibis chapter, didn't we? 


Class: 


m not sure; I was off working You'll have to catch me up, 


Head First: Well we have a paragraph on the Head First Lounge page that 
contains а written guarantee from the owners, and they want this paragraph to 
stand out independently of the other paragraphs, 


Class: So far, so good. -hut let me ask you this: are there a few of these 
paragraphe, or just the one 


Head First: Well 1 don't think there is any reason to have multiple quarante 
paragraphs, and I don't see the same style being applied anywhere else in the 
page, so just the one 


Class: Hmmm, I don't like the sound of that. You see, classes are meant to be 
used for styles that you want to reuse with multiple elements. И you've got ane 
unique clement that you need styled, that’s not really what clases аге fo, 


Head First: Wait а second —a elass seemed to work perfectly., how can this be 
wrong? 


Class: Whoa, now, don't freak out, АШ you need ко do is switch your class 
attribute to an 14 attribute. И will only take you a minute, 
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the box mode! 


Head First: An 14 attribute? I thought those were for those link destinations, like 
in Chapter 4? 
Class: ids have los of uses, They're really just unique Identifiers for elements, 


Head First: Can you tell us a little more about Ld attributes? This is all news to 


me. mea ire chapter usi acorrecty! 


1 just went through an е 


Class: Hey no worries; it's a common mistake. Basically, Ш you need to know 
is that you use a clase when you might want to use a style with more than ane 
clement, And if what you need to style is unique and there's only one on your 
page, then use an 2d. The 1d attribute is strictly for naming unique element, 


Head First: Okay, I think Ive got it, but why does it really matter? I mean, class 
worked just fine for us. 


Class: Because there are some things you really want only one of on your page. 
The guarantee paragraph you mentioned is опе example, but there are beter 
‘examples, like the header ог footer on your page, or a navigation bar. You're not 


going to have two of those on a page. OF course, you can use а class for just one 
element, but someone ese could come along and add another element to the 
class and then your element won't have a unique style anymore. talo becomes 
important when you are positioning HTML elements, which is something you 
haven't gotten to yet. 


Head First: Well, okay, Clas This conversation has certainly been educational 
for us. It sounds like we defintely need to convert that paragraph from a claas to 
an 1а, Thanks again for joining us, 


Class: Any ime, Head First 


< weran 
“POWER 


Choose whether you'd use class or id for the following elements: 


dd class 


пп 
пп 
oo 


А paragraph containing the footer 
of a page. 


A set of headings and paragraphs 
that contain company biographies. 


An <img> element containing a 


“picture of the day." 


dd class 
пп 


oo 
оо 


Aset of <p> elements 
containing movie reviews. 
Ап <ol> element containing 
your to-do list. 


<q> elements containing 
Buckaroo Banzai quotes. 
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identifying elements 


The id attribute 


Because you've already used ids on <a> elements, and because you already know how 
to we a с1ааа attribute, you're not going to have to learn much to use the 1 attribute. 
Say you have а footer on your page. There's usually only one footer on any page, so that 
sounds like the perfect candidate for an 1d. Here's how you'd add the identifier footer to 
a paragraph that contains the footer text: 


add the lke ae 
Жык id ad Монеа have one element n Yor 
id rane age with ani of fer 


Lao 


«БАШЧЫНЫ РЬ lease steal this page, it ien't copyrighted in any way</p> 


a, yor can only 


ath element tan 
have only eve id- 


Giving an element an id is similar to adding an element to a class, The only differences are 
thatthe attribute is called 14, not c2225; an element can't have multiple ids; and you can't 
have more than one clement on a page with the same id. 


thereyare no 
Dumb Questions 


О: Whats the big deal? Why do need an iajust CD: can an element have an id and also belong 
to prove something is nique оп the page? I could toa class? 
suse a class exactly the same way right? 
C Ves, can Think about tthis way: an s just 
Д: Wel you can ays ima a unique win aq ern ener Bt ot dert 
э йиз, bul hera are many reasons not 1o. Say youre — prom коп belonging a ona or more cases Gust 
жой on a wed раво wih aleam of people. One Ma having a unique name doesnt prevent you rm 
l your lamatas is going Io kok айа сазе and tnt joining one or more 08) 
den be reused wth her ements. I, n he oiher 
han, she sees an d hen she's ging lo know thats 
tora unique element There are a couple of ather 
reason ds are important hat you wont see for a ew 
‘chapters. Far stanca, when you stat posting 
siemens on a page, youl need each serment you 
ман ороо o have a unique i 
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һе box mode! 


But how do I use id in CSS? 


You select an element with an id almost exactly like you select an element with a 
clas To quickly review: if you have a class called specials, there area couple 
of ways you can select elements using this class, You could select just certain 
elements in the class, ike this: 


"s йи orly ravagrathe bak are în the specials class 


(Or you can selec all the elements that belong to the specials clas, like this 


specials ( 
the speci ease 


Using an i selector is very similar: To select an element by tsi, you use a # (hash mark) 
character in front of the id (compare this to class where you use a [dot] in front of the 
class name), Say you want to select any element with the id footer: 


кеш uen 
color: red; 


Ld 


Or you could select only a <p> element with the id footer, like this: 


pifooter ( <— 


color. red; “Tie select a <p> element if it ha 


"The other difference between class and id is that an id selector should match 
‘only me clement in а page, 
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using and selecting an id 


Using an id in the lounge 


Our guarantee paragraph really should have an id since it's 
intended to be used just 
designed it that way from the beginning, making the change is 


going to be quite simple 


nce în the page. While we should have 


Step one: Change the class attribute to an id in your "lounge.htwi" file 


(Xa 


<p ida"guarantee"> 


Our quaran 


mm 


Whether you're just stepping by to check i 


</p> 


Step two: Change the guarantee class selector in “lounge.css” to an id selector 


> spt bine the toa 
{ # in the tether 
4 


guarantee 
line-height: 1.9en; 
font-style: 
font-family 
color: 
border-color 
border-width: 
border-style 
background-color: 
padding: 
padding-left: 
margin: 
margin-right: 
background-image: 
ackground-repeat. 
ackground-position. 


"Times New Ronan", Times, serif; 


Step three: Save your changes and reload the page 


Well everything shold look 
EXACTLY the sane But don't 
you Feel much better now that 
everything i as # should be? 


— 


here ars пе 


Dumb Questions 


O so uy dta you make tno selector guarantee ratre 
than phere? 


Д: via ceuta navo it and hay bo vould ect 
ба same thing. On hs pag, we know that wo wil always 
have a paragraph assigned to he d so does realy matier 
(and &guaranto в imper) However, on a more complex set 

of pages, you might have soma pages where the unique id is 
assigned lo, say, a paragraph, and оп others ЇЗ assigned |o a 
ist or block quote. So you might want several rls for the id, Ike 
beende and blockauols#someld, depending on which Kind of 
lement is on the page. 


О; shoul назе star wth a class, and thon changeit 
ей when | know Is going to be unique? 


the box mode! 


No, Youll aftan know when you design your pages il an 
‘orion! going to be unique c no. We only i tings this way 
inthe chaptar because, wel, you didn't know about id when we 

tard. But don you think wo led id into the story rather nicely? 


© 


О: wrat are the rules tor dass and id names? 


Class names should begin with а er, but id names can 
‘at with а number or aletler Bol id and class names can 
‘can йит and numbers as well as tha _ character, bul ro 
spaces. So “number” works, as does "maincontent", bul not 
“header conan Just remember, ids must ba usque 
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using more than one stylesheet 


Remixing stylesheets 


Before we wind this chapter down, let's have а Bite fun d d 
remixing some stylesheets, So far, you've been using only 

опе stylesheet, Well, who ever said you can't use more than 

опе stylesheet? You can speci a whole set of stylesheets to 

be wed with any HTML. But you may be wondering why 

anyone would want to. There are а couple of good reasons. 

Here's the first one. 


Imagine that the Head First Lounge takes off, gets 
franchised, does he IPO, and so on (all thanks to you and 
your terrific web work, of course). Then there would be 

a whole corporate website with hundreds of pages, апа 
‘obviously you'd want to style those pages with external 
CSS stylesheets. There would be various company 
divisions, and they might want to tweak the styles in 
individual ways. And the lounge franchise also might want 
some control over style. Here's how that might look 


We use all 
‘the corporate colors 
ола fonts, but we add in a few 
special touches of our own, like a 
different line height, 


Weve set up all the main 

styles to be used by the 

company websites—fonts, 
colors, and so on. 


Weve got a young, hip 
clientele. We tweak the 
colors a bit and add a little 
edge, but overall we use the. 
division's main styles, 


o 
Beverage um 
Division . 
corporate seattle Lounge 
(part of the Beverage 
Division) 


398 Chapters 


www it-ebooks.info 


the box model 


Using multiple stylesheets 


So how do you start with a corporate style and then allow the division and 
the lounge franchises to override and make changes to the styles? You use 


several stylesheets, ike this: 


<title>Head First Loungec/title» 
<link type="text/css" hrefe'corporate.ces" rele 
<link type="text/css" hrefs'beverage-diviston.c. 


/ 


'tylesheet"> 
N rele"atylesheet"> 


In yor HTML ү» tan cy 
wore han one pect йе 
Tre got Bree 


De уема 
fo ore 
роі 


22 


<link type="text/css" href=tLounge-seattle-css” rel="stylesheet"> 


Order matters! A 


</head> 
<body> 
has ibs oun Bede in . 
ae 
[body 
<html> 


А: vas. bego eo w taton, wth te 
жуйеш on bon tig pedo 
ойуна sn foal propan 
tn ha ap велен пй fa cipe 
thie vac fene eds, 
akas precede sos et one 
ten TL 


stylesheet tan override 
the styles in the 
sylesheets linked above it 


there are no 
Dumb Questions 


О: oo tover need this tora single 
“=й 


(ou bo suprised. Somelmes there's 
ıa stylesheet you want to base your page on, 
‘and rather han changing hat stylesheet, 
ou ust nko and then supply your own 
stylesheet below that lo specly what you 
want change. 
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туе beverage division ег 


a» add 7 


e cognate sje a Ve 
edt rt ok be 


p 


Q 


YL can you say more about how the 
style fora specific element is decided? 


We aed a lite abou hat in Chapter 
7. ne for now, just add to at knowledge 
tha he ordering ol he stylesheets inked 
ino your fla matters. In the ext chapler 
aer you've leamed a few othar CSS detalis. 
ете going lo go through exactly how the 
‘browser knows which style goes wi which 
өтеп. 
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targeting media types 


Stylesheets they're not just for 
desktop browsers anymore... 


"There's actually another reason you might want to have multiple style 
files: ler% say you want to tailor your page's style to the type of device 
your page is heing displayed on (desktops, laptops, tablets, smartphones, 
ос even printed versions of your pages). Well, to do that there is a media. 
attribute you can add о the «1 n element that lets you usc only the 
style files that are appropriate for your device. Let's look at an example 


Yon specify the type of 
The media attribute дене by creating à “media 
aloo yo او‎ very! which и ste 


be type of dence h. SS e device 
stylesheet is for. 3 [d 


rel="stylesheet" medias'screen and (max-device-width: 480px) "> 


<link href" lounge-nabile.ess 


Here our pery specifies 
anything wth à sereen and any device that has a width 
(Gs opposed io say, a of at mest 40 рн 


printer, or 3D ales 
or a braille reader 


Likewise, we could create а query that matches the device if it is a printer 
lie dis 


link bref lounge-print.ces" rel="stylesheet" media prints 
^ 

C the media type i "print", 
‘ith eave we're Weng 
E ona printer 


The мес 
Bile ony gong to 
ve med d. 


There are a variety of propeties you can use in your queries, like cn 


davice-wideh, max-device-width (which we just used), and the 


orientation of the display landscape or portrait to name just a few. 
And keep in mind you can add as many <1ink> tags to your HTML, as 
necessary to cover all the devices you need to, 
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Add media queries right into your CSS 


There's another way to target your CSS to devices with 


xcii properties: rather 
than using media queries in link tags, vou ean also use them right in your CSS. 
Here's an example: 


the box model 


Use the media vale followed by your query 
ка then p lhe we ak 
| “С өтүү өү 
tendis screen and быаны йы E brave 
— h 
5 ee бы il be ed he 
, ret 
] 
m———— 
dest 
margin-right: 30px; E there rales will be used if the 
ў ee Ope oe 
‚ 
—— 
mn nd these ale wll be wed if 
font-family: Times, "Times New Roman", serif; re printing the page 
‚ 
‚ 


All other veles apply o all pages be 


ме they 
aren't contained within a Sede 


ae 


So, the way this works, only the CSS rules that are specifie toa media type are included in 
an бгаа а rule- All the rules that are common to all the media types are included in the 
CSS file below the eei rules, зо that way you don't have any unnecessarily repeated 
rules, And, when a browser loads the page, it determines through the media queries the 
rules that are appropriate for the page, and ignores any that don't match. 


Media queries are an area of active 

development Ьу the standards groups, 

зо keep your eyes on evolving best Wateh it! 
practices for targeting devices. 
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Media querie 
ге not 

‘supported by 

1EB and earlier, 
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testing your skills 


Look at the devices below along with their specs. Can you design a set of media queries 
4 to target each device? 


Exercise 
t Lj 
Smartphone 
480 by 640 Tablet, portrait, 
pixels шише 
1024y 768 бейнес Internet TV: 2650 by 1.600 
wee by 980 po pixels, landscape 
<link "stylesheet" href-"lounge-smartphone.css" 
media "> 
"stylesheet" href-"lounge-tablet-portrait.css" 
> 
<link href-"lounge-tablet-landscape.css" 
> 
<link href-"lounge-pc.css" 
> 
<link href-"lounge-tv.css" 
„> 
к 


four эммез heel 
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the box mode! 


there are no 


Dumb Questions 


Or rats pty cot sotcansst Û are ere ther mai properties Oh eit batar to nen or Qa 
. 
pe poe moda ури and — 

А: ves, you can sel seren fes bere are qule a een A aaron wr Bl tc bal 
Slee and her koa айа yor . dupl yow rados in one Na and spit 


HTML. їз Ве browser's jc lo use Ме fight wid, as youll see shoty), max and min thamup using @medla rules, your CSS 
stylesheet based on the media уре ама he height, ойепайоп. color aspect rale, and соч get prety big. By using diferent «и 
characters you specify in your таба more. Check out he CSS3 Media Quarles elements for diferent med ype, you can 
ашу. 


specification for al tha details (ырен, keep your CSS organized in Ме fles 
WSorg/TRlcs-mediaquerien), and Head depending on the medla ype. Sa, I your 


Fist Mobilo Web for examples. CSS flos are fatty arge, we recommend 
using о elements to spec erent 
sistens 

In your 'chaplerunge* folder, youl find ‘lounge-printess'. Open up "ounge ml in the 
"chaplerlaunge! folder and add а new ink to this stylesheet for the media type "pnt. Make 
sure you also add the attribute media screen to the <ink> element that links to "оте сес, 
зо you have опе stylesheet for the screen, and one for the pine. Then save, reload the 
page, and choose your browser's Print option. Run to the printer to see the result 
hrete"lounge-print.ces* 
с” tylesheet" mediae print" 
Here's be new link you need to 
add to your "arge nl” file 
Here's the printed version You've totally 
hanged how the page looks when is 
grid, wing CSS. That sbrutkure verses 
resentation thing в тей} paying off 
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testing diferent ess files for different width 


The maxdevice-width and min-devie-width media characteristics are dependent on the 

ExeRcige actual screen size of the device (no the width of your browser window). What if you are 
more concerned with the size of the browser? Well, you can use the max-width and min- 
width properties instead, which represent the maximum and minimum width of the browser 
window itself (not the screen size). Let's see how this works: In your “chapter9founge" folder, 
youl find Чоштде-тобїе сз". Open up your lounge. tmi fle again, and change the «ink» 
elements in the <head> of the document to look like this: 


<link type="text/css" rel="stylesheet" hrefe"lounge.cas' 
mediae'screen and (min-width: 481px) "> 

<link type="text/css" href=" lounge-nobile.cs 
medias"screen and (max-width: 480px) "> 

<link type="text/css" href=" lounge-print.css" rel='stylesheet" mediam"print"> 


 rele'atylesheet" 


Now, reload the “lounge him” page in your browser. Make sure the browser window is nice and big. You 
should see the lounge page as normal. 

Next, make your browser window narrow (less than 480 pixels) What happens to the lounge page? Do 
you notice а difference? Describe below what happens when you make the web page narrow and load 
the page. Why is this version of the page better for mobile browsers? 


sel ME you've wang IE, that means IES 


Make sre you've wing 3 modern br 
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the box model 


Qe POINTS 


CSS uses a box model to conirol how 
elements are displayed. 

= Boxes consist of the content area and 
optional padding, border, and margin. 

= The content area contains the content ofthe 
element. 

= The padding is used to create visual space 
around the content area. 

= The border surrounds the padding and 
content and provides a way to visual 
separate the content. 

= The margin surrounds the border, padding, 
and content, and allows space to be added 
between the element and other elements 

= Padding, border, and margin are al optonal. 

= An element’ background wil show under he 
content and the padding, but not under the 
margin. 

= Padding and margin size can be setin pixels 
or percentages. 

^^ Border width can be set in pixels or by using 
the keywords thin, medium, and thick. 

= There are eight diferent styles for borders, 
including solid dashed, dotted, and ridge. 

= For margins, padding, or the barder, CSS 
provides properties for setting ай the sides 
(tp, right, bottom, ef) at once, or it allows 
them to be set independent. 


* Use the border-radius property to create 
rounded comers on an element with a border. 


Use the ne-heiht property to add space 
between lines of tert 


Yau can place an image in the background 
ofan element with the background mage. 
property. 

Use the background-posiion and 
background-tepeat properties to set he 
poston and ling behavior of the background 
image. 

Use he class attribute for elements that you 
want to style together, as a group. 


Use he id attribute to give an element 
a unique name. You can also use the id 
attribute to provide a unique style огап 
element. 

There should only be one elementin a page 
with a given i. 


You can select elements by their id using the 
id selector, for example, #myfavoriteid. 


An element can have only one id, butît can 
belong to many casses. 


You can use more than one stylesheet in your 
HTML 


мо stylesheets have conficng property 
defnibons, the stylesheet thats lastin the 
HTML fle wil receive preference. 


You can target devices by using media 
queries in your <ink> element or he media 
тае in your CSS. 


paying attention? 


HTMLeross 


‘You've really expanding your HTML and CSS skills. Strengthen 
those neural connections by doing a crossword, All the answers 
come from this chapter 


Across 

1. By default, background images do this. 

4. To create а "ragged" border, use the 

зуе. 

6. Padding, borders, and margins are all 

a Which kind of elixir do you get if you're not fully 

salisfed? 

10. Between padding and margin. 

ЭЗ. We changed the _ class to an id. 

44. To use a diferent style for diferent devices, use 
queries. 
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border 


2. The space between the content and the border. 
3. tf you want your element to have a unique style, use 
this kind of selector. 

5. Property used to increase the space between ines 
of text. 

1. Publishing term for the space between lines. 

8. The preferred font used in the guarantee paragraph. 
10. CSS sees every element asa. 


11. Style of border we used on the guarantee 
paragraph. 
12. Optional «ink» attribute for other kinds of 
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the box mode! 


ее 


See # you can identify the padding, border, and margins of this paragraph. 
Mark all the padding and margins (eft right, top, and bottom]: 


ETT 
TT 
TT рд, 


m 


But that’s not all; 
resident D3 spins а choice selection of trance and drumabass 
beats across cur spacious tiki-themed dance floor, Or just har 


407 


you are here 
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exercise solutions 


Ifyou look at the guarantee paragraph as i's supposed to look in its final form, it has an 


е italic, serif font a greater ine height than the rest of the page, and (f you're looking really 
tion close) gray text. Write the CSS below to set ће ine height to 1. 3em, the font style to italic, 
the color to #444444, and the font family to Georgia, Times New Raman’, Times, serif 


Heres he solution...did you test t? 


Yar tan add фы кеч ребе бе ayer in 


" d бе rule We added them at the top 


guarantee “ 
line-height: 1.9en; 
font-style: italic; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: яаа; 
border-color: black; 
border-width Notice bot a Font name hat sate nt 
border-style: Ye thal тоа А with quoter 
‘background-color: 
padding: 
margin: 

D 


FCC 
е елей bne heht porn 


let 3 spins a choice selection of trance and 
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the box model 
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j Look at the devices below along with their specs. Can you design a set of media queries 
д to target each device? 


_ 
або иш 


11028 by 768 


А Desktop PC. 1280 Internet TV: 2650 by 1600 
шаа by 960 pixels pixels, landscape 
<link rel="stylesheet" href-"lounge-smartphone.css" 


media- Hh: oro "> 

"stylesheet" href-"lounge-tablet-portrait.css" 

sereen and (max-deviee-vidth: IO 4px) and (orientationportraid] "> 

<link rel="stylesheet" href="1ounge-tablet-landscape.cs: 
medi ac" sereen and (max-device-width: |024) and (ovientationlandseape) "> 

"stylesheet" href-"lounge-pc.css" 

mediac" sereen and (max-device-width 1280p) "> 


sereen and (nax-devite: 


<link 


<link 


<link "stylesheet" href-"lounge-tv.css" 
sereen and (max-device-width: 2050р) "> 

Media query support acros devices "P. 

Redes eda DT le arbre Dd yor spt he signers Tar em 


latest and greatest techniques. 


th jing degrees of specificity. [F you did E 
different, are yours better or worse than a 
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the box mode! 


While you're inking that iced chai, ry your hand at adding а border-radius to the guarantee paragraph 
Wee got some examples below of the guarantee paragraph with a variety of border radius values set. 
Write the CSS to create the border you see in the example. For each example, we've provided the size 
ofthe borderadius used to create the rounded comers in that example 


Weite your CSS here 


и 


border-top-left-radis: zor 
border-top-right-radus Op 

bborder-bottom-right-radins: Ops; 
border-bottom-leFt-radus: ЗО; 


border=tap-leF tradi: Opi 
border=tap-right-radus Ops 
border-bottom-right-radius gor 
border-bottom-leFt-radus: Op 


border=tep-leFtradu бүк, 
border-top-right-radius: Ори 
border-bottom-right-radin Ops 
border 


border—tap-leF radius Oemi 
border-tap-right-radns: Lemi 

border-bottom-right-radis: Oem 
bborder-bottom-leF radius: Leni 


you are hes АЙ 
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exercise solutions 


The max-device-widin and min-devioe-width media characteristics are dependent on the 

Exercise actual screen size of the device (not the width of your browser window). What if you are 
more concerned with the size of the browser? Well, you сап use the max-width and min- 
width properties instead, which represent the maximum and minimum with of the browser 
window tse (not the screen size). Les see how this works: In your “chapterSlounge folder, 
youll find "ounge-mobie. css". Open up your lounge. fle again, and change he eii 
elements in the <head> ofthe document to lok like this: 


— свв" 

рх) "> 

<link type="text/css" hrefe"lounge-mobile.cas" rel="stylesheet" 
medias"screen and (max-width: 480px) "> 

<link type 


"text/css" href=" lounge-print.cas" rel="stylesheet" medias print"? 
Now, reload the “lounge him" page in your browser. Make sure the 
browser window is nice and big. You should see the lounge page as 
normal. 


Next, make your browser window narrow (евз than 480 pixels). What 
happens to the lounge page? Do you notice a diference? Describe 
below what happens when you make the web page narrow and load 
the page. Why is this version of the page better for mobile browsers? 


When we make the lounge Page narrower 

an 80 pede the garantet roa 
Te 

En oni 

the vest of the тагу; Ue background 

star image diappears and the extra 

adding on the left goes anay too TERS 


This vertion vil wrk better for mobile 
bronzes because the guarantee paragraph 
gels leo parron ЧА te CSS Bas 
wider sereen. By vemeving 
ee ке 
margin and padding, the paragraph is easier 
fo read fd ely the ever at 
matters at the end of the day, right? 


Make sure you're wing à modern browser! IF you've wing IE, that means EI 
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10 divs and spans 
* + 
Advanced Web Construction 


Some builders say, 
“measure twice, cut once 
T say, “plan, div, and span" 


It's time to get ready for heavy construction. in this chapter we're 
going to rol out two new HTML elements: «div» and <span>. Those are no simple 
“two by fours"; these are full-blown steel beams. With «iv» and <span>, you're going 
to build some serious supporting structures, and once you've got those structures in 
place, you're going to be able to style them all in new and powerful ways. Now, we 
couldnt help but notice that your CSS toolbelt is really starting to fil up, во I's time 

to show you a few shortcuts that wil make specifying ай these properties a ot easier. 
‘And we've also got some special guests in this chapter, the pseudo-classes, which 
are going to allow you io create some very interesting selectors. (f you're thinking 
that “pseudo-classes" would make a great name for your next band, oo lale; we beat 
you to lt) 


anew chapter 413 
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a new lounge assignment 


You know, we'd love it if you 

could make the elixir specials a 

little more attractive on the web 

роде. Could you make it lock just 
like our handout menu? 


The ein 


es lice 


Here's the ander mene with the ee 
reti Wow the different 
than the vest of the page Ёз thin the tent 
is eenteved, and Uere are red headings an 
аламан border around the whole hind, 

be tp 


— 


ard even sone tetklal aphex 
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divs and spans 


A close look at the elixirs HTML 


Alice sure has asked for a tall arder, hasn't she? She wants us to take the existing lounge HTML 
and make it look like the handout menu. Hinmm... har looks challenging, but ме do have С 

оп our side, so lets give it a try But before we jump right into styling, let's get an overview 
of the existing HTML. Here's just the HTML snippet for the elixir specials you'll find it in 
‘lounge btn!” in the “chapter 10/lounge" folder: 


“The dier spezial setbon begins 


We have чё an ade heading 
Yee @ameekly Elixir specialse/na> 
pe 

ban дик hae 
cath with ( P 


<img arce"images/yellow.gif" alte"Lenon Breeze Elixir"> — әт дна. 


ue | ee pir 
piede NNNM eum 
> > 
a bist of lémón into a amosth citrus wonder PLI 
iat will keep your immune system going all description 
аә pet 
- 
. gie" алаасы свае виза 
аә мы 
poop iem 
<p> repeated for 
<r 
Е 
. gf" айылыма —Os 
<r> 
pes 
m 


p ty 
инин meet 
titles"Head First Lounge Elixirs">el\xira</a>. * 


</p> 
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a new element 


This looks tough, guys. 
There ore a lot of style changes 
we've got to make, and the elixirs 
‘style doesn't really match the 
rest of the раде, 


Jim: Come on, Frank, you know we can just create a clas or two and then 
siyle all the elixir elements separately from the est of the page 


Frank: That's true. Maybe this isn't so bad. I'm sure there is a simple 
property to make text align to the center, And we know how to handle the 
colored text. 


Jim: Wait a sec, what about that border around everything? 


Frank: Piece of cake. We just learned how to make borders. Remember, 


every clement can have one. 


Jo 


Imm, I don't think so. If you look at the HTML this is a bunch of 
<ha>, and <p> elements. IF we put separate borders on every clement, 
jose look like separate boxes, 


Frank: You're right, Joe. What we need is an clement to nest all these other 
elements inside, so we can put a border on that. Then we'll have one border 
around everything in the elixirs section of the page. 

Jim: Well 1 sce why you get paid the b 
‘elixir stuff inside a <p> clement, ora <blockqust 


bucks, Frank. Could we nest the 


Franks Well, that would ruin the structure and meaning of the page, an 
elixir menu is't a paragraph or а block quote. 


sels ike a hack to me, 


Frank: acuh 1 don't think we're that far off Ive been reading а certain 
took on HTML and CSS, and I'm just up to а section on a new el 

called «div». T think it might he the tool we need. 

Joe: 
Franks That's not far ой, because а <a 
logical sections ог groupings. 


avo what's that? Te sounds like it's for math, 


lets you did your ра 


Jimm Hey, that sounds Ше exactly what we need! 


Frank: Yup. Let me show you guys how to divide a page into logical 
sections, and then PI show you what I know about <div>. 


Let’s explore how we can divide 
a page into logical sections 


"Take a look at the web page to the right: it's a web 
page for PetStorz.com, and we're going to spend а 
few pages looking at how we might add some more 
structure to it by identifying some logical sections and 
then enclosing those inside a <div> element, 


This is a pretty normal 
looking pae: leks af 
headings, paragraphs, and 


PRT O 


But by just focusing on he strutture of De page 
yer ark really tell a whole БЕ abort he page 
What deseris make vp the header? |s there a 
Footer on the pagg? What are the content area? 


Identifying your logical sections 


Okay; so our job is to locane “logical sections" 
in his page. What's a logical section? I's just 
«ор al erent hat are ll reine on бе 
page. For instance, in the BeStore.com web 
Page, there are some cements that are used or ak 
бе uet rea am йе pog, nnd ияле bat are E 
toed for doge Let's check iu. Z 
~N 

Беноа УУ‏ ا چ 
жок ne for ab, nd ne For det‏ 
ба мег ether areas bro but: wel Come Doge‏ 
үүн‏ 


In this case, both the cats and den sections 
изчи of bus elements, à heading ard a 


paragraph But often these groupings tan 


ontan many mare elements 
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how to mark up logical sections with divs 


Using «divos to mark sections 


Nov that you know which elements belong 
in each section, you can add some HTML. 
to mark up this structure, The common. 
way to do this is to place «div» opening 
and closing tags around the elements that 
belong а logical section. Lets first do this 
pictorally and then we'll came back 1o the 
seal markup in а comple of pages 


Labeling the «їуз 


Jost by nesting your elements in cdivos, 
you've indicated that all those elements 
to the same group. But you 
given them any kind of label 
that says what the grouping means, 
sigh? 
A good way to do that isto use an ta 
attribute to provide а unique label for 
the <aiv>. For instance, let's give the 
cats <div» an id of “cats” and the 
dogs <at> an id of “dogs 


418 Chapter 10 


Let's nest the elements in eath 


roning in a «бо element — | 


ES 
аа N 


ai 


hd heres oor 
doy gro 


Here we've added anid 
of "ete! ta the Fret ^ 
<div> ta indicate what 

e logical selon i For 


Ard lets for dose 
— 


www it-ebooks.into 


divs and spans 


RA 
“POWER 


Оп a referral from the Starbuzz 
CEO, you've been asked to 
come in and consult on style 
changes to PetStorz main 
page. How quickly would you 
understand the PetStorz web. 
page if you were shown Page. 
One? 


What about Page Two? 


have a tle style 


Adding some style 


Okay: о you've added some logical 


этисе ta the Rn page, and you've By setting the 

ао labeled that structure by giving cach Күй 

Sav» a unique id. That all you eed «ает le has 7 
о start styling the group of elements veh the elements N 
contained in the te certaine i the co 


— 
^ 


Mere we have бе le one 


for tath «des Each «dio i 
selected by э id selector: 


онар Уна 
ә» V and For dep we have 
нөн wei SD o mue 
ы 
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Exposing even more structure 
"There are а couple of reasons you might 
want to айй mare structure to your 


Peewee Gel, | 
Sucre of your pages whieh can nip nati шы 
others understand them, and also help * 
iia Жеш шша окне 
жаш Осы yal ated he 
sure bales 

m" 


So, in the cave of leis u we could 
the foster of the page 


ale this о the next level and add a few 
møre «divos 


Adding би clare tah ios SL Sy 


tan even help Yor thinke throvgh Yor 
page design For instance, does this 
Tene «р really need to be here? 


‘Adding structure on structure 


And you don't have to stop there. It is 
common to nest structure, too. For instance, 
in the PetStorz page, we have а cat section 
and a dog section, and the two together are 
logically the “pets” section of the page. 

we could place both the "cat and "dogs 
<div> into а "pei" «div», 


Now ede marked vp i TAL ө that we 
ow tere is a lont stb nthe pon 
with et content in € Further, aes 
абык hs be озна bes one for 
ate! and one for dog 
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О: so s de acts ike a container 
that you can put elements into to keep 
thom ali together? 


— tan ota 
абава otis Nl ony dey act 
‘slog orare tyran ов 
Shel тиши ceme Qa a ar 
ery) сири ter we кал ng 
‘ovary ber e oen тм 
at cup soo a nl 
— 


2 Beyond the structure l'm already 
puting into my pages with headings and 
paragraphs and so on, should 1 also be 
adding a higher level of structure with 
ies? 


Avocats vou want a unum 
тез tras a reni purpose, bnt ass 
wan mene Ah leg 
— pn gl 
e job dona. For instanca 


there 
Dumb Questions 


itis ello add a “pets” secon hat 
contains both авг and е lo the 
Работ page, by al means add However, 
I provides no real bereft, then just 
complicates your page. Aler working wth 
os for a while, уо start to geta el for 
when and how much lo use them. 


О; bo you over put asan na cs 
instead of hing an it 


fol, remember trat an element can. 
have an id and be in ona or more classes at 
the same time, so Ве choice is mutualiy 
‘excuse. And, yes, thre are many times 
you creato «dis and placa them inio 
‘lasses. Say you have a bunch of album 
‘sections in a page of musie playlists; you 
might put al he elements that maka o the 
бит into a div» and hen pul hem all 
inan "albums" class. That denies where 
бе albums are, and hey can all be styled 
loguhor with the class, At fea same tine, 
you might де each aum an id so hat it 
‘an have addtional ly арда separately. 
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О: iwas having ite rouble 
folowing the «di with «io eut 
wilh the “pets” and "cats" and doge 
Could you explain hata itle more? 


А: ae vora usea traning 
oes oer doers iT ва > 
те па о nesia nan cn 
theron была on en ase 
‘tar Те ay or 
Soin just noning an reni nde saber 
inet anne caa Pur af 
tangi stow rge cunke sue 
Ча ani ung ree na pe sacan 
ry mide cosi a aber 
sudo etd a ager ecto ae, 
oman’ tcn 


But the best way lo understand why youd 
want someting Ike а «dio within a «do is 
by using hem and encountering а station 
where ey mean something lo you. Put is 
in he back of your min, and youl sae an 
‘example soon enough where we need ono. 


Use, don't abuse, <div>s in your pages. Add more 
structure where it helps you separate a page into logical 
sections for clarity and styling. Adding <div>s just for 
the sake of creating a lot of structure in your pages 
complicates them with no real benefit. 
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adding divs to tho lounge 


Meanwhile, back at the lounge. 


Enough "theory" about «diva-lefi get one into the lounge page. Remember, we're trying to get all 
the elixir elements into а group and then we're going to style it to make it lok like the elixir handout. So, 
‘open up your “lounge htm” fie in the “chapter 10/lounge” folder, locate the elixir elements, and then 
insert opening and closing «div» tags around them. 


Nive the opening s mE 
«div sdererixira"> Md fesis ic 
<h2>Weekly Elixir Specialse/h2» нз” to identify t i ДӘН 
Y а n nudata HTML from the entire 
= le When you ete 
ing e- images/vellew.gif" alte"lemon Breeze ELixir"> e- rll st 
e ККА 
denen гесез» 5 
= 


‘The ultimate healthy drink, this elixir combines 
herbal botanicala, minerals, and vitamins with 
а twist of lemon into a smooth citrus wonder 

at will keep your immune system going all 
day and all night. 
</p> 


E 
<img sres"images/chat gif" alte"Chai chiller Elixir"? 
</p> 


achat chiilere/h3> 
E 


Not your traditional chai, this elixir mixes matseacut 
‘chai spices and adds an extra chocolate kick fo 
feinated taste sensation on ice, 


E 
<img srceimages/black.gif" alte"Black Brain Brew Elixir"> 
</p> 
<h3>nlack Brain Srewc/h3> 
<> 
Want to boost your memory? Tey our Black Brain Brew 
elixir, made with black oolong tea and just a touch 
Gf espresso. Your brain will thank you for the boost 
</p> 
E 
Join us any evening for these and all our 
other wonderful 
<a hrefe"beverages/elixir.htnl" 
itle» lead First Lounge Elixira">slixirs</a>. 
</p> 
«pates E hd hers ену ls 
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Taking the «div» for a test drive ss 


That was easy; wasn't it? Now that we've got a more non 
structured page, let's fire up the browser and see 
how it looks, 


‘ey ha ne 


Hmmm. no change at all 
But that's okay the <div> 
inque еы and 1È 
бее have any “oak” or 
etal style inthe pa 


ad, «до i jek a den 
element, and you tan apply any styles 
ү want to i So, onte jos Erow how 
fe style a block clement (and үө do), 
you new how be style de 


DERAN 


POWER 
Remember, the goal here is to restyle the elixir content on the page. 


so it looks like the handout. CL 
Before we took a detour to learn about «div»s, we were trying to 
figure out how to get a border around the entire set of elixirs. Now 


that you've got a <div> in "lounge-html", how would you go about 
adding a border? 
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Adding a border 


Now that you have а <div> around all the elements in the elixirs section, 
‘the n begins: you ean style i 


"The first thing we want to reproduce in the elixirs handout is a border that 
wraps around all the elements in the clixirs section, right? Well, now that 
you actually have а «div» element that wraps around the elixirs section, 
you can style it and add а border, Let's try that now: 


You'll ced a new rule in the lounge's CSS to select the <d1v> element 
using its id. Open up your "lounge cs" fle in the “ehapter 0 lounge’ 
folder, and add this rule at the end: 


Ма а ak De end of your CSS file ft 


border-color: #007076; 


aree tolor: 
pee 


An over-the-border test drive ete... 


Alter you've added die CSS, save it and then reload 
your lounge html” file. 


Here's the border that you jest added 


be бон coo dot 
— 


үе added a е berde 
dto dos buk i tl hat 
vo adding and va erg 
We need lo add that toe 


] 
Notice that the border soes S 976 


around all the elements ide 
be ede element: The . 
isa bon Ше every other 


clement, ө when you 244 
a border, the border goes 
around the content, whieh ie 


all he elements in the io y 
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Adding some real style to 
the elixirs section 


So far, so good, We've found a way to get 
that border around the entire section. Now 
you're going to sce how to use the «div» to 
customize the styling of the entire elixirs section 
independent of the rest of the page. 


We obviously have some padding issues to deal 
with, because the border is right up against the 
content. But there's a lot of other style we need 
to work out, too. Let's take a look at everything 
we need to take care of 


divs and spans 


The width of the eis 
landes narrower thin the 
‘Theresa ыйы vest of the page 
nage at the f 


Y ape‏ وشا 


andthe prava 
tert are bth, эме 
the дыка ne N | 
эё or Dat 
matcher the red in 
базе 


“The tent and imager 
ave centered, and 
беч! pading on 
He sider айа 
spate between the 
test and e berde | | 


The Ine-height of the | 
Turris lads a le more 

The бе default ме eight for 
the page (before we hinged it | SR 
in be last бәне). ш 


Te Font foil ica ans Kn pat 
Whe the body бм, ы we don't have bo 
change at Renenber hat the <div> | 
elemen and sl the element rested int 


Chal cher 


inherit the Font: fal from the body | 


deem 
SUE 


тенме Уу ЖУМШАШ 


Da 
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The game plan 


‘That's a lot of new style, so let's get a game plan together before 
attacking it, Here's what we need to do: 


E] Fins, we're going to change the width of the elixirs <div> to 
make it narrower 


O Next, well knock out some of the styles you're already familiar 
with, like padding and the background image. Well also play 
With the text alignment, which you haven't seen before 


E) Then all we've got left are the text line heights and the heading 
colors, You're going to see that you need to upgrade your CSS 
selector skills just а bit to get those changed. 


That's a lot todo, so lets get started 


Working on the elixir width 


We'd like the elixirs to be quite narrow зо it oaks like the narrow 
handout menu at the lounge; about 1/4 the width of a typical 
brouser window should be about right. So, let's say you set your 
browser to 800 pixels wide: that would be about 200 pixels. You've 
set the widths of padding, borders, and margins, but you've never 
set the width of an element before. To do that, you use the width 
property like his 


Melixirs ( 
border-width: thin; 
border-style: solid. 
border-color: #007е7 
width: 200px; 


C. wid property lets yos seri the width af 
the element's content ated Here, мете spect yn 
that the content width be 200 piel 


Were setting this on the esis «alv». So the tort 
in the eins <div> will be 200 Pet wide, and the 

browser's layout vales will work t Fit all the elements 
vested inthe «div> within Dat wid 


Give this u Open your lounge cer and add this nde to the bottom. 
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Test driving the width 


Nest, save the CSS and then reload the “lounge html” fle, You'll see the elixirs 
section get much skinnier, thanks to the width you gave it. The width of the 
content in the <div> is now exactly 200 pixels, Then 
behavior you should cheek out. 


ako some interesting 


Now al the cante 

dins file mb a spice thaw 200 | 
ss wide. E doesn hare n 

Jo nde yasr bromsar wind veh 

Ti or really narrow Tey it! 


кысы be 
Malt ofthe ee 
ae a lot 
Ше hat beme 
Vestri umen 
bee 
le of merc vom 
y edd 


200 ыа 


Compare the beha 
ta that of the ether бее 
hen you nake your browser 
Sandon wide. The paragraph: 
eee expand to fil the 
idis of the bee Well tale 
Bout Eat more in a sec 


HERAN 
Ses 
Can you resize your browser window to ess than the with of the elixirs <div>? Some browsers 
won lel you go that narrow; others wil. Ifyou can go narrower, compare the tex nthe eis 
<ai> with the rest ofthe text on the page. The other paragraphs resize themselves no matter 
how wide or narrow you go, bu he lir <div> never gels narrower or wider han 200 pixels. 
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more about widths 


T was wondering how the width 
property relates to padding and 
margins, Is this the width of the 
content itself? Or the entire box, 
Including the padding ond margin? 


The width property specifies the 
width for the content area only. 
To figure out the width of the entire bax, you 
need to add the width of the content area to the 
‘width of the left and right margins, the left and 
right padding, and the border width. Don't forget 
that you have to include ийге the border width, 
because there is a border on the left and the right, 


H 171 


428 


divs and spans 


Well, then how do we 
specify the width of the 
entire element? 


You don't. You specify the width of the content area, 
the padding, the border, and the margin. All of that 
added together is the width of the entire element. 


Say you set the content area width to be 500 pixels using the v 
ina CSS rule 


h property 


And let's say you've set the margins to 20 pixels and the padding to 10 pixels, and you 
have а I-pixel border. What’s the width of your element's box? Well, it's the width of 
the content area added to the width of the left and right margins, the left and right 
padding, and the ей and right border wid. Let see bow to calculate that 


300 poe 


ides, and border 


add that to the content area 


00 pace and ve have 300 + 
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box width and height fine points 


dot tte wth olan 
sent thn where dos the width come 
pn 


Д: mesi wan ra bd oon 
1 
таннае spaco ai ya tik 
Mindy df vel pages weve boen 
Бадо tah ck ceram ean ando 
Deer шана rove and att 
жау what t does Now al sagt 
tate ver gg то aoa 
— Asl farmer al 
Эш lors соно М wae 
зраз mai ar gt, 
Eerder and rain too 


D Questions 


О; wnat ii dnt nave му margin, 
абр or borders? 


Thon your content gels to use the 

nto wth ol he box. I ho width of the 

‘ontant area is 300 pixels, and you have no 

adding, border, or margin, hen the width of 
лге box would also be 300 pl 


O ала 


A: яшем spy naa 
usualy in pools-or you can specty а 
percentage. Ifyou use а percentage, hon 
the wel Is calculate as a percentage of 
ненна о he сопагег he element is in 
(which could be a <body, a <d>, ot). 


hat about the height? 


In general, the height ofan element 
is elk at te default, which is auto, and the 
browsar expands Ве content area vertically 
solo he content is visible. Take a leok 
айке els secon atar we set the with 
10200 pls, and youl see the «d» gota 
ош: 


You can exl set a height, but you risk 
having the bottom of your content overtow 
irto oher elements f your height isnt bg 
enough to contain it. in general, leave your 

ent heights unspecifed so they default 
ваш. 


Here's a box that has all the widths labeled, What is the width of the entire box? 


— n 
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Adding the basie styles to the elixirs 


We've gor the widih ош of the way: What's left to da? 


— he аһ af he ii ано 
— 


Nest, we'll knock out some of the styles you're already familiar Y Wee ding this def nert 
with, like padding, text alignment, and the background image: 


(Then all we've got lel are the text line heights and the heading 
colors. You're going to see that you need to upgrade your CSS 
selector skills just a hit to get those changed. 


Now we're going to concentrate on some of the hasc styles, like the 
Padding. the text alignment, and also geting that background image 
ûf the cocktail glasses in the elixirs «div». You're already familiar 
With how most of this works, so let's take а quick look at the CSS: 


Remember, we've gens to apply all hi style to 
the elire едо so ak i өнү affecte the edo 
and the elements contains, not the entire page 


“The default padding on ә «фе is O pines o 
4 add tone padding to rode a bi 
Nebee that we're v 


TE ate bor the content ; 
Sain dara st oe a bese es 
e e af voon Dev, Sat he 
Дый Sarg nthe b> heading ak fk a 
eoi ed de nd ol see theres plenty of 
то room above the A-) But we do need it om the 


frome TT ie 

E Pa the left to indent 
i Туа н geing to come în handy later 

20px; 


Use deck on Мой elements te 


же p  — — аи the tenk they Contain. Here, 


re going bo Center 
‘url (images/cocktatl.gif) + шы И 
repeat-x) 


D 
[m Finally vere qe oa an image to oe în the background, in thit 
ave the alta image Weve tetra the backgrmind-repent property 
do repeats, whieh will ble the aye өнү in the horizontal direction 
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Test driving the new styles s5 


Now it's time to add those new properties to your 


mo 


lounge. cs" Ше and reload the page. Let's check out 
the changes: the headings, the images, and the text 
arc il centered in the «div» арй bave a litle more 


breathing room now that there's some padding in 


place. We've also got a itle decoration at the top. B prd 


содй in —.— sping here, and 
| Sethe bottom 


with the 1i 


ard left 


Walt just a вес. why does the 
text-align property affect the 
alignment of the images? Shouldn't 
it align only text? Seems like it 
‘should be called something else if it 
‘aligns images teo. 


ood point...it doesn't seem right, does it? But the truth 
istha n will айда al йе inline content in a block. 
clement, So in this case, we're setting the property on the 
div» block element, and all its inline content is nicely 
centered as a result. Just remember that text -aliar 
despite its name, works on any kind of inline element. 
One other thing to keep in mind: the text-align 
property should be set on block elements only It has no 
effect if it's used directly on inline elements (like «na: 
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Thats interesting 
because I noticed the text inside the 
<div is all inside other block elements, 
like «ho», «hio, and «p>, So, if text-align 
is aligning inline elements in the <div> block 
element, how is the Text in these nested 
block elements getting aligned? 


Good catch. All the text inside the <div> 
ешеш is in nested block elements, but it is 
all aligned now. Thats because these block 
elements inherit the text -214ga property 
from the «di», So here's the difference: 
rather than the div» itself aligning the 
text in the headings and the paragraphs 
(which it won't do because these are block 
clement) the headings and paragraphs 

e inheriting the text-align value of 


So what? Well, f you think about i, this 
gives you a Jot of leverage when you use a 


because you can wrap a section of 
coment in a <div> and then apply styles 
to the «ace» rather than cach individual 
clement. OF course, keep in mind that not 
all properties are inherited by default, so 
this won't work for all properties 
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calculating box wid 


Е pen your pencil 
опон that you understand widths whats the total width 
ete elas bor? io an wth we now the content arn 
12200 риев. We've aiso set some left and night padding. 
that affects the width, aswel а а border that's set tor 
Ist assume a thin border s 1 рив thick, Ike Rison most, 
browsers And what about margins We setae marin 
Value bui no ight margin value зо the ight margin 
pos by default. 


Here are ай the properties that relate to width. Your job isto — 
figure out the total width of the elixirs <div>. 


border-width: thin; 


width. 200px. 


padding-right: 20px; 
padding-left: 20px; 


margin-left: 20px; 
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We're almost there... 


We're close to having the elixirs done, What's efi? 


st, we're going to change the vidi of the elixirs <div> to 

Next, we'll knock out some of the styles you're already Familiar 

with, like padding, text alignment, and the background image. 

[Then all we've got left are the text line heights and the heading V Were onthe lart stet 
calors, You're going to see that you need to upgrade your С 
selector skills just а bit to get those changed. 


Sounds pretty casy right? After all, you've done 
all this before. In fact, given that you know you 
сап just set styles on the «dt» and they willbe 


Weve almost got this done: we. 
Just need to change the header 
‘colors and also the line height, 


inherited, you can take care of this real fast 


Frank: Yeah, this is interesting The main elixirs heading, which is an <h2>, 
has the aquamarine color becanse there is already an 2» rule in the CSS, 
But we need for that to be black, Then we've got the <h3>s in the elixirs, 
Which need to be red. 


imn: Yeah, no problem, well just add a fev more rules, 


Franke: But wait а sec. if we change the <h2> rule, or add an <h3> rule, 
then we're going to change the heading colors on the entire page. We just 
want these colors in the elixirs section. 


Jim: Ob, good point. Hmmm... Well we could use two clases. 


Franke: That would work, although its a bit messy Anytime you 
add а new heading to the elixirs «dv», you'll have to remember to 
addit to the das 


imn: Yeah, well, c'est la vie. 


Frank: Actually Jun, before you use classes, go check out descendant > 
selectors, I think theyll work better he 


Jimm: Descendant selectors? 


Frank: Right, they te just а way of specifying a selector like “select an <h2> 
clement, but only if it's inside an elixirs «di vo." 


Joe: Pm not following, 
Fran: Okay let's step through this. 
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selecting only certain headings 


What are we trying to do? 


Lets take a quick look at what we're trying to do 
to the heading color, 


What we have now 


— 
heading deser n the 
E 
ш, Bc 


abt ros he CSS өр bo tar b A4 Dx) Те) 
> AT» dece tent abere So um 
Beds ad dis дее ne Bak 

ene the thor 4 a 


color: 4007e7e: 


Md here's the le qe joa the l> 
ard di» eor» the legte file 


What we want 


We want the di» and НА 
— sta eee 


Cw 1 


Ма ve want bı change the > 
and ӘЗ» clement in the биж 
be to be blek and red 


" å pm 
Buk if ue change the existing vule for Ge well affe aser dees 
the font olor of every 02 in the main pite nd if we и 
add a new vule for А, then нү , that get added 
b. the main page ater wil be тей, whieh ie not what we 
ant: Now we tod ме а Class le Jim geld bet 

i give Frank's idea a try Ft. 


9 


nm 
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What we need is a way to select descendants 


What we're really missing is a way to tell CS 


that we want to only select 
elements that descend from certain elements, which is kinda like specifying that you 
only want your inheritance to go 10 the children of one daughter ог son. Here's 
how you write a descendant selector 


Leave à pate betwen 
the parent nine and 
the dexerdint nine 


pet darek / шш. a ca 

| a Boop 
div h2 ( E Nite bu tef 
color: black; тку Here's what thie 


akay da 
n „= selects in the lounge 


This vale saye to select 
adds Ghat isa 
pon» 


Now the only problem with this rule is that if someone created another <div: 
in the "longhtmi file, she'd get black «n2» text, even if she didn't want it. 
But we've got an id оп the elixirs <d1v>, so let's use it to be more specific about 
which descendants we want 


element with And here's its 
die id diis pou 


/ 


#elixirs h2 { 
color: black; 


H 


“This ые ap bo ek any a that ie a 
descendant of the id "die! 


чей, so if we added another <div> with 
MD» to the page, that's okay betae this vile 
ts only ek inthe ee <i, 
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тоге on selecting children 


et 


below that are selected. 


‘Your turn. Write the selector that selects only <h3> elements inside the elixirs «divo. 
In your rule, set the color property to #d12c47. Also label the elements in the graph 


Write yor 


РА 


РЕА 
Dumb Questions 


О: Deseandant usualy means cil grande, 
ares ranch. Here, were just selecting the chiki 
descendants пам? 


Tats a realy good point. The selector “ass re. means 
[ANY descendant of elis, зо th <h2> could be а direct chi ol 
the <ai> or nested down inside а <blockquote> or anther nested 
‘<i> (making ita granéchi and so on. So a descendant slacor 
Selects any e?» nested inside an element. no matar how deeply it 
is nested. 


[o 


is there away о selecta direct child? 


438 


Yes. For example, you could use “Bours > h2 to select <h2> 
ону fits the direct child of an element with an id of os 


О; ньии! need something more complex, lite an t that 
ве child ola <blockquote» that isin iis? 


teka he sara way. sut тив tran, Пани 


felixize blockquote h2 ( 
color: blue 


‘This selects any <12> elements that descend от <blockquole>s 
that descend fom an lament wilh an d ol "alnis". 
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Changing the color of the elixir headings 


Now that you know about descendant selectors, let's set the <h2> heading to 
m do tha: 


black and the <h3> headings to red in the elists, Here's how 


selectors te target 

ard 5 elements 

Were setting ®2> to black, and > 
3 à her code 


delixirs h3 ( 


color: #41247; 
1 doa ved coer 


A quick test drive... sts 


Go ahead and add these new properties to the bottom of your 
‘ounge.ca” fle, save, and reload “lounge tea”. 


sent affected the dene. 
ig sed for di 
be mäin Faye 


Nox all we need bo do it 
Fo the ire ih 
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Fixing the line height 


Recall that in the last chapter, we made the line height of the text in 
the lounge a lide taller than normal. This looks great, but in the elixirs 
We want our text to be a normal, single-spaced line height о match 
the handout. Sounds easy enough, right? Just set the Line-heiant 
Property on the «41: and everything will be fine, because line height 
îs inherited. The only problem is that the headings will also inherit the 


Jine height, and wel end up with something like this 
IE yer set the neigh property on 


KT Me eine «фе, Beni will be inherited 


beute by all elements in Be adios cling the 

line-height: lem; ades. Notice that De line height in 

) бе heading i too small and the b Ines 
are starting to run beter 


Here are the Font sines TY 
ofthe elements We set 
body to "mal, that's 


"The reason that the line height for the elixirs heading is t0 
small is because every element in the elixirs <div> inherits 
the line height of Lem, ог “I times the font size of the 


elixirs element," which in this ease is “small”, or about 12 чыгы ” 

pixels (depending on your browser). Remember, the elixirs 

<div> is inheriting its font size from the <body> element, The кезем, 4. ч 

Which we set to "mal ert bo b 
‘the fant: size of mi à 


What we really want is for all the elements in the elixirs Are ene 


<at> to have a line height that’s based not оп the font ый, 


size of the elixirs <div>, but rather the font size of cach 
clement itself We want the <h2> heading to have a 

Jine height that is 1 times its font size (which is 120% of 
mall" and the <p> should also have a line height of 1 
times its ont size (which is “small”. How ean you do this? 
Well, the Line-height property is a bit special because 


bady line-height is 
16 times "small" 


атаан 


you can use jut а amber instead of a relative measure lie We want a> te line-height is 1 times 
em or tiforit, When you ше just the number 1, you're havc a ine-heght | mall", or about 12 pixels 
telling cach clement in the elixirs <div> to have a line Datin bes 

height of 1 times its aien font size, rather than the font size ite om font st Se 
of the elixirs <a>. Give it a try; set the line height of the Bats IF ps 1 
йз <ai> to 1, and you'l sce that it fixes the heading (20% of eld haere 


about 14 pixels 
IA > 


жашага ч ders <i> to 
ЗЕРЕ E de dc ee The forking of Ue p elonent i "mal (p hes 

D f eath element iw it font-size from the der- divs), vo ib will have a 
E line-height of E pres мык и what e wy 
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Look what you’ve accomplished... === 


wer able to do lls wih justa ew CSS lr nie с 


By now, you should be realizing just how 
powerful 


is, and how flexible your web 
Pages are when you separate your sumcture 
(HTML) from your presentation (CSS). You can 
sive your HTML a whole new lonk, simply by II 

changing the CSS. : and heres 


Кеи 


np em) 


Wow, that's fantastic! 
You were able to make the. 
elixirs section on the website 
look like the handout, with just 
alittle CSS. 
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It’s time to take a little shorteut 


You've probably noticed that there are quite a few CSS properties that seem to 
go together. For instance, padding-left, padding-right, padding-bo! 
and padding-top. Margin properties are the same way: How about 
background-image, background-color, and background-repeat? Those all 
set different property values on the background of an clement. Have you also noticed 
it gets lide tedious typing all those in? There are better things to spend your time 
оп than typing all this, right? 


padding-top: Opx; 
padding-right: 20px: 
padding-bottom: 30px 
padding-left: 10px; 


Thats a lt ef typing jut 
€— жау 


Well, here's a special bonus for this chapter, You're going to learn how to specify all 
those values without risking carpal tunnel. Here's how: 


—€— TE pd heres the new and improved 


specifying yow padding m as a shorthand 


жы Саз е D 


dealer ee de. sings eg Sc a 
Кыйы. mei 
better leer ope, 4444 


You can use the same sort of shorthand with margins 


€— 
eie margin: Opx 20px зори lere, 
dest bottan: 

— Р] 


Ic ike тыы, yon con we 
hand bo sey al yor DS 


vales with one property 


If your padding or margins are the same value оп ай sides, 


you can make the shorthand sell short: те 


VOS me ap at Өү» 
padding-top: 20px; . 4 pec 
padding-right: 20px; padding: 20px; е ade of De e 
padding-bottom: 20px; 


padding-left: 20px; 
A padding des ave the 
NA then you tan write it Ше ба 
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But there’s more. 


Here's another common way to abbreviate margins (ог padding: 


margin-top 
margin-right: 
margin-bottom: 
margin-left: 


the right and ll 


эч the sème, then үө tan ме 2 shorthand 


And what about the border properties we mentioned? 
You can use a shorthand for those оо. 


border-width: Rewrite border md 
border-style: properties as one 
border-color: property, These can be 


Tn any order ү» Ше 


The border shorthand is even more flexible than margins or padding. 


xe are al perfetti 
Tender shorthand 


because you can specify them in any order you like. 


Border: solid thin; M 
Border: solid thin #007e7e ) 
border: #007e7e solid; < 
Border: #O07e7e solid thin; 
border: solid; 


and don’t forget the shorthand for backgrounds 


You can also use shorthand for backgrounds: 
Like border, ves tan goin anf ede 

d There are alse 

tan экөбү 


ert 


few other aes 


background-image: Url (images/cocktail gif) : dose, We pe- 


background-repeat: repeat-x: 


background-color: white; 7 


background: white url(images/cocktail.gif) repeat-x; 


shortcuts for fonts 


And even more shorthands 


No description of shorthands would be complete without mentioning font shorthand. 
Check out all the properties we need for fonts: font-family, font- 

t-var lant, and don't forget Lin 
there's a shorthand that wraps all these into one. Here's how it works: 


tyle, 
eight, Well, 


font-weight, font-size, fo 


Finally, ү» need to add 
Here are the properties that go into the yer Font landes You ol 
font shorthand. Ordering а ecd te spetify one Font 
эчен ve say ceres 


buk alternatives are highly 
" 


font: font-style font-variant font-weight font-size 


ane. 


ight font-family 


ee ee ee 


These valser ae all 


Thee git 
рук 
re мы ay 
rt тм 
ere hu 
Property and sad 

or ec 


You 


my but they need to cone 
before the m 


So let's give this a пу. Here are the font properties for the lounge body: 


font-size: small; 
font-family: Verdana) Helvetica, Arial, sans-serif; 
line-height: 1. 6em; 


Now let's map those to the shorthand: 


We're ot using any of these, buk 


thats ау ауте all orta 


t =ч 


font: font-style font-variant font-weight font-size/line-height font-family 
And now lee’ write the shorthand: 


font: small/1.6em Verdana, 


vetica, Arial, sans-serif; 


5 


here's the shorthand version Wow that's ute a 
shorthand, hak? You're ging be be able te doble our tine 
ak the ера or on the beach) now 
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ever 
Dumb Questions 


О; shouta alvays use shorthand? 


Д параза Sono poot tt belong one 
readable. Shorthand do have Pa advantage ol reducing е size 
‘of your CSS fies, and certainly hoy are more quickly пет 
because hey regure less ping However, when the 

problem, ay are а Ийе more dificult lo "debug" I you have 
incorrect values or the wrong order So, you should use whichever 
form is more comfortable because they ат boh prec valid. 


О; shorthand are mare complex because | have to 
remember the ordering and whats and isn't optional How do 
imemorize ital? 


А: Wor, sob шивей how qty bcos secon 
fab ule laste Mtoe lose el 
Cac manual” а ek bu, ara so yon pead 


divs and spans 


Margin: Opx 20px 30px 10px; 


TIT 


Just grab your andy reference manual and look itp. Wa te 
particulary ed ol e CSS Pocket Reference by Erie Meyer. 
Its tiny and makes a great ference. 


Jo quic ook up property names or the syntax o a property. 


Its time to put all your new knowledge to work. You'l notice that at the bottom of the 
lounge, there's a small section with copyright information that acts as a footer for the 
page. Add a <div> to make this into its own logical section. After you've done that, 
‘style it with these properties: 


a Lat näke the 


font-size: 50 E PRINT 


text-align: center: 


line-height: normal; S= Ard let's center the 
margin-top: 30px; SL 
“We've alio setting the line-height to be 
ermal, ich ера yor kaner 
d КЬ Norval los Be oar to pk an 
Vari the appropriate size for the Ine height, whieh is 


typically based on the font 


And while you're at it, have a look over the entire lounge.css” fle. Is there anywhere you 
might want to simplify things with shorthands? If so, go ahead and make those changes. 
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T saw the nice job you 

did on the elixirs, Can you 

give us a hand with the music. 

recommendations on the site? 

We don't need much, just 
some simple styling 


oe 
fing et the ошл 
wen wear acte! 


wnat е nue tm a 
porem di 


— 


The lenges 
resident D. 


— US EAM 
POWER 


What do you think is the best way to style the CD and artists in the 
"What's playing at the Lounge" section? 
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T was thinking we could 
dust wrap ceno and «strong? 
elements around the CDs and 
artists, On most browsers, that's 
going to give us italic and bold, 


Frank: Yeah, but that's kind of like using а <b2ockguote> just to 
indent text, What mean is that we don't really want to emphasize and 
strongly emphasize the CD and artists, We just want italic and bold, 
Plus, what if someone changes the style for <em> and <strong>? That 
would show up on the CDs and artists too. 


Jim: Well, actually thought about that, but Ee think of any 
‘other way to do it, [mean this is just text in the same Бы йет. Ir not 
like we have any way to style it 


Frank: What do you mean? 


Jim: We can only style elements, and here we just have a bit of text, 


Tike, “Musie for Airports Brian Eno", We'd need an element around. 
cach piece of text to be able to style them differently 


Frank: Oh, right, right. Tsee what you mean. 
Jim: 1 suppose we could use something like: 


<div clasam"ed >it: 


for Alrportse/div> 


n 


But that's а block element, so that s going to cause linebreaks 
Frank: Ahhh, I think you're on to something. Jin. There's another 
element like «àv» that is for inline elements It's called a <span>, That 
could work ош perfectly 


Jim: lin game. How does it work? 


Frank: Well, a <span> gives you a way to create a 
characters and elements. Here, let’ just give it a try 


rouping of inline 
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Adding «spams in three easy steps 


> elements give you a way to logically separate inline content in the same 


way that «41v allow you to create logical separation for black-level content. To 
sce how this works, we're going to style the musie recommendations by fist adding 
<apan> elements around the CDs and artists, and then we'll write two CSS rules to 
style the «spans, Here's exactly what you're going to do: 


© You're gong to nest the CDs and artists in separate «spazi elements 


Ө Youre going to add one <span> to the “ed claus and the other to 
the “arist” class 


Ө You're going to create a rule to style the “ed” class with italic, and 
the “artist” class with bold. 


Steps one and two: Adding the «spams 


Open your "lounge hun le and locate the "Who's playing at the Lounge" 
heading Just below that, you'l see the unordered list of recommendations, 


hallee/Li> 
Asten Tt Falla, zero Te ib» 

h 5, 1.2.3. Stents 
Roi Est Mort, Vive Le benz, Enigmae 1» 
ite dd for airports, Brian поэ 
</ul> 


Let's try adding <apan>s to the first CD and arts: 


Do the sane for he artist Nest it 
In a span element, only this Eme 


" Next, add à ti 
Jak add a оңа oe abe the CD bl 
lic ind Bethe of АЙЫ А the CD tite 


NEL. 7 v 


Cli»«span elasse"cd'sruiins saré/spam, «span elasss”artist’>clauds challcé/spamse/li» 
Atmen rt Falls, zero 7/4» 

аг 7, 1.7.5. Bukeme/li» 

«ола Roi Est Mort, Vive Le Roi!, Enimae/li» 

Vli»susic for Airporta, Brian Enoe/1i» 

</a> 


tag aleng with 
tag aleng with 
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Step three: Styling the «spavos 


Before we move on, save the fle and reload it in your browser. Like a <div>, by дебий a 
арап» has no effect on style, so you should see no changes. 


Now lets add some style. Add these two rules to the bottom of your "lounge cs file: 
Were ging be add à le fur eaeh of 


the new Clases td and abit 
For CDs well make 
PI the font style tale 


font-style: italie; 


D 
dod lr arts ыл 
artist ( i 
‘font-weight: bond; ef ed 
n D 


Test driving the spans s&s 


‘That's i. Save and reload, Here's what you'll see: 


Nice job. This next 
Now the 


Firat muse 


one's for you. 


— 
[vm 
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<r your pencil 


ofthe music recommendations and test your page. Youl 
find the solution in the back of the chapter, 


—À— 
eth 7, .f. 5. Bukeme/14> 

Able Rol те poii, Eniguae/li» 
<Lipmusic for Airports, Brian Ene</1i> 

</a> 


demgem 
Dumb Questions 
О; When do tuse a <span> rather Can set propa ike width on images are a ite diferent tom aber inina 
эы ancien dent keno ог «юмо elemen Actually what about emer Tra wh ридор aximaria 
черт — in general? Drpra al teh nre Bo De dor 
üt cement Ronenter on Cup 

— ur A: чапан немаа ® #уо set he wth ofan nage using 
.. ЛК етене tte n he cm 
‘matches the meaning of your content. So, ‘but you won't notice any effect until you element or the width property in CSS, the 
if you are emphasizing words, use <em>; bos ben them (which youl earn how to do in Browser scales the image to fit the width 
if you're trying to make a big point, use the next chapter). You can also add margin Jou Specify. This can sometimes be handy if 
Чар. Ва машу пу наты and page Besa sements ale, Youcart ei he mage use change 
change the stye of certain words—say, a border. Margins and padding on inline The dimensions, and you want the image to 


ihe names of abums or musk ass on a elements work a ite diferent кот lock appear bigger or smaller on he pago. But 
fan sila web page—lhen jou should use a elements you ad а margin on all sides rember, if yau rely on the bowser o scale 


JJC 
ade classes о ур thm and siye added 1o tha lef and пон You can a40 За than you ned (I ha mage is larger 
then pang lo he top and bote fanning ben you ned. 


етеп, but tha padding doesn't attact he 
‘spacing of he other inne elements around 
IL so ho padding wil averiap other nlne 
aman 
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Hey, I know you think you're about done, 

but you forgot to style the links, They're 

still that default blue color, which kinda 
clashes with our site, 


‘Think about the <a> element. 
Is there something about its 
style that seems different from 
other elements? 


how to style links 


The <a> element and its multiple personalities 


Have you noticed that links act a Виде differently when it comes 
to style? Links are chameleons of the element world because, 
depending on the circumstance, they can change their style at a 
moment's notice. Let's take а closer look: 


СЕТО FEY 


Here's a ink уме never Ваа on — 
before. This ix led an "esed lnk bere 


or jut ik" and йз bke by defile 


m 


Med heres à link Yo 
have checked on before 
We call these “viited 
Wis Maal, visited JT ees 
links are delayed 

ina different tor 

han ited inks тө 
al у» Can tell the 
ference most 
revers ved kt 
are perle by defail 


тейтш tines 


Ard if yov held Your move over a link without 
йу i ia ealed "hovering" On some 
bronzes yor ме a tel ip hat displays the 
tent of the “tle” attribute And if you pay 
lowe attention, on tome web pases yor see 3 
different style а you hover 


Unlike other elements, the style of an <a> element changes depending 
оп its state. IE the link has never been clicked on, it has one style, and 
Ж it has been clicked оп, another, And if you hover over a link, it can 
have yet another style. Perhaps there's more to styling <a> elements 
than meets the eye? You betcha. Jets take a look. 
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How can you style elements 
based on their state? 


A link can be in a few states it can be unvisted, visited, or 
în the hover state (and a couple of other states 100). So, how 
do you take advantage of ай those states? For instance, it 
would he nice to be able to specify what the visited and. 
united colors are. Or maybe highlight the link when the 
user is hovering over it If only there were a way 


Well, of course there is, but if we tod you й involves using 
Фані іа you'd probably just decide you've read enough 
forthe night, and close the book. Right? But hold on! 
Pretend we never said the word / fdr den апа let's just 
look at how you can style your links 

e clement <a>, fled by a+ les 


Notice we have th 
| ke we want to selec Make ur "n 


[TE Make we Yo de 
have жү эме: v ese selene (с, a = le 
ГА Tis selector 
a:link { ШИ de when Bep are 
color: green; in an visited babe 
) 
a:visited is seekor ie 


color: эте o inks when 
) they are viited 


СИИ " 
Diel geume 404 teeter 
: эней hen je 


Exercise 


Add these rules to the bottom of your "оштре свв" 
fle and then save and reload "unge fim, Рау 
around with the links to see them in each state. 
Note that you might have to clear your browser 
history to see the unvisited color (green) 


divs and spans 


lese 


Dumb Questions 


7 What happens if I just style the <a> 
‘element like a normal element? Like: 


а 0 color: red; } 


A. Yucatan yo ims 
alo ha sane ales id mal ur 
inser uar Hendy because you cant ua which 
cout yaive va and мес au havert 


О: nat are the other ink statas you 


There are two others: focus ang active. The 
focis state occurs when the browser focuses on 
yout ink. What does hat mean? Soma browsers 
йон you о press your Tab kay to rotata through ай 
бе inks on your page. When the browser comes to 
a irk. tat Ink has the ous” Seting a value for 
the focus pseudo-cass а hop foraccessily 
because hose who need lo use a keyboard to 
access a link (as opposed to a mouse} wil know 
when heyve got the right ink selected. The active 
stale occurs when the usar frst cicks on a ink, 


О; Can't my inks be in muti states at 
эрте tine! For instanca, my ink cdd be 
Viste have the mouse hovering over if, and 
tho user could be actively clicking on ital! 


Д: Tay sure can. vou ain wich sya ie 
rel e rng ol yaur lo S ig 
ere generaly cara bet, vated, 
Poe ca ми Pan ace. yous a 
edi You get a тшда yon exec 


IU 


Only ona of he mast confusing words in 
"he CSS language. Ви as youve seen, eying 
links в prtysighfonvar. бо l's lak about 
Sauen cassa 
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The Pseudo-class Exposed 


This week's interview: 
Getting to know the pseudo-class. 


Head First: Welcome, Pseudo-clus. Ies a 
pleasure to have you here. 1 must confes that 
When they first asked me to do this interview, 1 
drew a blank. Pseudo-class? The only thing that 
came to mind was that ‘BOs Phil Collins song 
Pseudo-class: Uh, that would be Sus, 
My name is Pew, 

Head First: Oops. Honest mistake, Maybe we 
could start there. Can you tell us a Title about 
Where Pseudo came from? 

Pseudo-class: Pseudo usually means 
something that looks like the real thing, but isn't 
Head First: And the last name? Class 
Pseudo-class: Everyone knows what a CSS 
class ix. I's a grouping you create to place 
elements in so you can style them together. Put 
“pseudo” and “elass” together and you have а 


pseudo-class: И acts Ше а class, but it nta real 
class, 


Head First: What's not real aboutit if it acts 
like a class? 


Pseudo-class: Okay open up an HTML file 
and look for the class :visited, or :linkor 
hover. Let me know when you find one 


Head First: 1 don't see any 


Pseudo-class: And yet, а: Link, 
a:visited, and even a:hover all allow you 
to specify style, jus like they were classes. So, 

those are pseuco-clases. In other words, yout 

can style pseudo-clases, but no one ever types 
them into their HTML. 


Chapter 10 


Head First: Well then, how do they work? 


Pseudo-class: You can thank your browser 
for that, The browser goes through and adds all 
your <a> elements to the right pseudo-classes, 
If a links been visited, no problem; it goes 

into the +visited peeudorclas Is the wer 
hovering over a link? No problem, the browser 
throws i in the shave pseudo-class, Oh, now 
the user isn't hovering? The browser yanks it 
ош of the “hover” pseudosclas. 


Head First: Wow, I never knew So there are 
al these classes ош there that the browser is 
adding and removing elements from behind the 


Pseudo-class: That's right, and i's damned 
important to know about; otherwise, how would 
уой give your links style ibat adapted to what 
state the link was in? 


Head First: So, Pseudo, do you just do inks? 


Pseudo-class: No, I do other elements too. 
Modern browsers already support pseudo- 
classes like :hover on other types of elements, 
And there are some other pseudo-classes, ton 
For instance, the pseudo-class «tiest-child 
is assigned to the first child of any element, like 
the first paragraph in a <blockquote>. And 
you can even select the last paragraph of a 
<blockquote> with the :1ast-cht 1d pseudo- 
class. Pm quite versatile, really 


Head First: Well, Ive certainly learned 
something in this interview. Who knew that 
song was actually called "Sussudio"! Thanks 
for being here, Pseudo-class. 
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Putting those pseudo-classes to work 


‘Okay, let's be honest You've probably just learned the most important thing in this 
"hook: pseudo-clases, Why? No, no, not because they allow you to style elements 
based on various "clases" your browser decides they belong to, ike :14nk or. 
:flzat-child, And, no, not because they give you really powerful ways to style 
elements based on things that happen while your visitors ate using your page, like 


sar, W's because the next time you're in that design meeting and you start talking 
about peeudo-clases with a real understanding, you're going to move to the led of the 
dass We're talking promotions and bonuses. 


ata minimum, the awe and respect of 
your fellow web buddies, 


So, let's put those pseud 
rules to your Bungee 


ases to good use, You've already added some pscudo-class 
and they had a dramatic impact on the look of the links, but 
they're probably not quite right far the lounge. So let's rework the style a little: 


ve Weve ving dide eter 
Day is sae Tie Сей dtr a 
eT 


UST the 


ned with à pede 
de eet any wed <a> dene 
ече with the id det Se were h 


[m 


de ebur 


кү 


жашага ашк {СШ 0, these to, we're setting the color 
color: ROUTeTe; For o 
) 


ed nks, a ete eee 


€ 
sing à dark pay 


жета a:visited (Lo ry 
color: 833333: 


D 

Now er De realy interesting rule When 

delixirs a:hover ( ioe 

5 
Sies, oss, 


ser is hovering over the nk мете 
ng the background to ved. This 

s the link oe ар аа when you 

pas бе mse vey ib Gwe iba dry! 


A Open up your "ounge css and rework your a:link, visited, and a:hover 
Exercise des to use the new descendant selector and the new style definitions. 
Save, reload, and um the page. 
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using pseudo-classes for links 


Test drive the links ene 2 


When you reload, you should see some new oS Se mad 
чус in the elixirs section. Keep in mind, to see 


‘eum ata yan may bave tocar ушш NS 
browser's history; otherwise, the browser will wife nas a the 
know you've visited these links before. e 


Now we've got 

tnks, gray vated eee 

very col ved highligh when 

ү» hover aver бе Ink 2 
What's playing at the Lounge 


— 


r 


‘Your job is to give we detailed directions link in the lounge some style. Just ike the. 
elixirs lnk we want all unvisited links to be aquamarine, and all visited links to be gray 
However, we dorit want the other links in the lounge to have any hover style...that's 
unique to the elixirs. 5o, how would you do it? Fin the blanks to give the detailed 
directions" link, and any other links you might add о the lounge late, this style. Check 
your answer in the back of the chapter and then make the changes in your lounge files. 
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Isn't it about time we talk about the "cascade" 


Well, well we're quite far into this book (157 pages to be exact) and we still haven't 
told you what the "Cascade" in Cascading Style Sheets is all about. Truth be told, you 
have to know a Jot about CSS to fully understand the cascade. But guess what, you're 


almost there, so wait по more 


Here's just one last piece of information you need to understand the cascade. You 


already know about using multiple stylesheets to ether better organize your styles 
‘or to support different types of devices, But there are actualy some other styles 


hanging around when your users visit your pages. Let's take a look 


не 
V Fey hr ci 


the stylesheets you've 
written for your pate to be override your 

he pts important” а 
of a property declaration 


Y 


that thee is a way for a vender 
jes To do 


eee 
The author HTML det 1 us md 
(that’s youl) pieces 


емее. i wed lend 
ers stylesheet в мей 


‘And nly, үө already 


know that the browser 


default styles that are 
мей f you don't define 


The reader 
(your users) 


the styles for an elem 
These ae alio the syle: 


ГА 


ы коней del уы. The browser 


When the rower needs b determine 
hich style ® apply to an element, G wes 
all these stylesheets Priority и given биз 
te the author's styles (Bhat, your style), 
hen to De reader 

Finally to t 
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what the cascade does 


‘So, to review, as the page authors, we 

can use multiple stylesheets with our HTML, 

And the user might also supply his онт styles, 
ола then the browser has its default styles, 
лоо, And on top of al that, we might have. 
multiple selectors that apply to the same 

element, How do we figure out which styles 

an element gets? 


That's actually another way of asking what 


cascade docs, The cascade is the way the 


browser decides, given a bunch of styles 
in a bunch of stylesheets, which style is 
going to be used. To answer that question, 
we need to bring everything together—all 
the various stylesheets hanging around, 
the rules, and the individual property 
declarations in those rules. 


In the next two pages, we're going to чер 
through the nitty-gritty details of how ай 
this works. The details involve a lot of 
sorting and various details of deter 
which rules are the most specifie with 
respect to an element, But here's the payofí 
after going through the next vo pages, 
уш be able to getto the bottom of any 
soles that don't seem to be applied in the 
way you expect, and further, you're going 
то understand more about the cascade than 


ч 


99% of weh page developers ош there 
мете not kidd 
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The cascade 


For this exercise, you need to “be the browser: Let's say you've got an cz: 
clement on a page and you want to know the font-size property for it. Here's 

how you do it = 
Step on 


Gather all your stylesheets together, a 
Fire you ecd Pe ledere setts the web page 


author has writen, any stylesheets that the reader has added to the mi, 4 — — — —— 


and the browsers default styles. (Remember, yon the browser now, so. 


Find all the declarations that match. 
We're looking specifically for the font-size property, so lok at all the L2 


declarations for font=s1 ze that have а selector that could possibly select the 


<h1> element. Go through all the stylesheets and pull ош any rules that match 
<h1> and also have а font-size property 


Step th sone 
Rew че Гун tehes nen . 
author, reader, browser. In other words, if you wrote them as the author of the E у. dees that, those 

— 


Now sort al the declarations by how specific they are, 

Remember, we talked about this a little, way back in Chapter 7. You can 
intuitively think about a rule being more specific if it more accurately elect 
ап element; for instance, the descendant selector "blockquote h1” is more 
specifie than just the “hi” selector because it only selects <h1>s inside of 
cblockquoters, But there is lite recipe you can follow to calculate exactly 


how specific а selector is, and we'll do that on the next page. 


Step five: 
Finally, sort any conflicting rules in the order they appear in their 
individual stylesheets, 
Now you just need to take the list, and order any conflicting rules so that the ones 
appearing later (closer to the bottom) of thelr respective stylesheets are more important. 
That way, if you put a new rule in your stylesheet, it can override any rules before it 


"That’s itt The first rule in the sorted list is the winner, and its гов 


i property is 
the one to use. Now let's see how you determine how specifie a selector is 
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calculating specitict 


Welcome to the "What's my specificity?” game 


To calculate the specificity; you start with а set of three numbers, like die 


000 


And then we just tally up various things from the selector, like this 


Does the selector 


Does the selector bee any classes 
have any ids? One cc pseudo-classes? does the selector have. 
point each. e Cre pom each any element names? 
^ | ‘One point for each, 
Vv v 
For instance, the selector “hI” has one clement in iso ou gett Both" ard “MM” have ore 


element so they bath get 3 Lm 


ect number calm 


0 01 / 


As another example, the selector “hl blue” has o 
опе class, зо you'd get 


Шош» 011 


After you've tallied up ll the ids, classes, and elements, the bigger the specificity 
‘number, the more specifie the rule. So, since hi hoe has a specificity of 11, it is 
sore specific than "bL" which has a specificity of L 


element and. / alinthe : 


left ruber Calon 


ia yer pet 


Try your hand at calculating the specificity of these selectors using the rules above: 


hi.greentea ollip em 


pimg green Span cd 


айак elixirs ht sidebar 
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ıa specificity number 
т 


Д: ss eed hen ue eal numba: 100 
(ot ud is ger funr (on) мий 
Ia an 1 (n) anon 


O wrat about a rule like "m, e 
ati ts meu, 


А: Tint tat so sparta nies: 
an he, wth hae pea а tr" 
Sian V a Pass atch 
ort 


Putting it all together 


Woo hoo! H's time for an example. Say you want to know the 


property for this «ni» element: 


< elas 


Gather all your stylesheets together. 


у 
ө. youre бе author 


2 


Bat vit ns 
тє the brewer 


take this through all the cascade steps: 


there are no 
Dumb ¢ Questions 


О: can you say more about the 
important thing? 


he reader can override a siye by 
Puting an “importan on the end ot his 
Property declarations Мо this 
rut 

font-size: 200% ‘important; 


П 
and iis wil override any author stes. 


"blueberry'»Blueberry Bliss Elixire/hl» 


И Remember, yose, 


be lovis bers 
wet hou to 
9) 


divs and spans 


О: tant got the reader's stylesheet, 
зоом can lever figure out the way the 
cascade койа? 


2 You cant, bt lao atit this way: i 
"ho raader overrides your styles, then hat 

is realy beyond your control. а just make 
your pages look Ike you want hor lo using. 
your styles. If ha reader chooses ю verde 
thom, than hell get what he asks for (for 
beter or or worse). 


64 — 


pr 


That x- 
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you are herê > 461 


using the cascade 


Step two: 
Find all the declarations that match, 


Here ave all the wales 
tod озу match the <h> 
element and that con 

He color property 


body m1 £ 
p 


ын 
D 
E 

color: etater: 
D 


Step th ther 
1 
Now take all your matches, and sort them by xpi 
author, reader, browser. : 
xa 
КИ 
Author à 
— Here wee jet 
toler’ blow ended De 


, < new abe, 


Reader t E 


E 


Brower f : 


Step four: 


then нобе ad 
then broser. 


Now sort the declarations by how specific they are. To do that, we need to 


first calculate each specificity score, and then reorder the rules. 
E: 


/ 
Miis WO А 
ы теме E 
— 011 the ету 
“шо: 
ne 

i 
í 
E, 
—— 


bo the of 


002} 
001 


ite that we oly < 


specify 


within the author 
d browser categpriez We don't re-sort 

st, or elte the "body М” vale wold 
the "W ve sek by the ator 


reader 
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leber 


011 
001 


0 0 2 
001] 


Finally, sort any conflicting rules in the order 
‘that they appear in their individual stylesheets, 


We've aay here, ане we don't hve 
ану гетен veles at thie point. The 
Мат 

sinner Ë ere had been tao vule with 


with a tere of Il, ie the clear 


a store of Oll, then the vule apear 
latest wold be the win 


We have a winner... 


divs and spans 


dc 
j 
j 


After sweating through the first choice of elements, the 
sorting, more sorting, and being judged on specificity, 
the "hl blueberry” rule has risen to the top, So the color 


property in the «hl» element will be blue. 


ther 0 
Dumb Questions 


О; so one more time: дн thal the ower in the CSS fle, tho 
— but how does having multi links 1o 
stylesheets in my HTML wor? 


. he same CSS e or 
та ht pln Wat you тенге a CS al ptr дуна your 
fat dr sa ed. Taso oe ба ns 


0): iuga ir qiii pde 
Bn 


Dye tna sot as ting a e 
babi Sonya o ara, rore Tn wach 
f fra ergy, yau sort ио An, ran ears 
tav be sane sn, oso an tado Be eng 
Hte sechs 


CQ oo readers ely make teir on ety 


ets? 


Å: By ana rge no But hare are cases whore poopie wit ial 
ingot uma yaf tye coe a al 

faclo tr wth ening But sce acheter cong oniy 
how hse ба. rely ht cr mto you ds, 


О); How much of this do I realy need to remember? 


Д: touve going 1o йор sore ion row al hete 
знаена get and ara en basi Pat tte wil 
уга ng iy ver oor in a we, ough ya ea i 
Beri por pages anges your minds dat 
nya bck on your og Yr tow gh 
"cade and balore you no зол насу мы 
— 
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when the cascade doesn't provide а value 


‘So, what happens if, after all 
this, Т still don't have any rules 
with a property declaration for 
‘the property value Em trying to 
figure out? 


Ah, good question. We actually talked about this a ite in 
‘Chapter 7. If you don't find a match for the property în 
any rules în the cascade, then you ry to use inheritance. 
Remember that not all properties are inherited, like 
border properties, for instance. But for the properties that 
ae inherited like color, font-family, 1ine-height, 
and so on), the browser looks at the ancestors of the 


element, starting with its parent, and tries to find а value 
for the property If it does, here's your property value 


Got it, Hey, but what if the 
property isn't inherited or 
cant find a value in the 

ancestor's rules? Then what? 


"Then the only thing lefi to do s fall back 
оп the default values that are set in the 
browser's stylesheets, and all browsers 
should have default styles for every element. 


° 


Oh, and why 
is this called the 
"cascade" anyway? 


— wns chus became of бе & 


way that styles coming from multiple stylesheets can 
all “cascade” down into the page, with the most specific 
styling being applied to cach element. (If that doesn't clear 
things right up for you about why is called cascade, don't 
feel bad. И didn't make it any clearer for us, either, Just 
call it "CSS" and move on) 
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divs and spans 


STOP! Do this exercise before 
going on to the next chapter! 
Sees 


This is a special brain power—so special that we're going 
to let you think about it between chapters. Here's what 
you need to do: 


0 Open the file “lounge. htm" and locate the elixirs <div>. 


© Move the entire elixirs <div> section to the top of the 
file so its just below the paragraph that contains the 
lounge logo. 


0 Save and reload your page. What changed? 

© Open the йе "lounge css 

Ө Locate the ehre rule. 

O Add this declaration at the bottom of the rule: 
float: right; 


© Save your fle, and reload the page in your browser. 


What changed? What do you think this property does? 


review of divs, spans, and psoude-classe 


Qa POINTS 


ж «фә elements are used to group related elements 
together into logical sections. 


= Creating logical sections can help you dently the main 
content areas, header, and footer of your page. 


= You can use «di» elements to group elements 
logelher that need a common style. 


= Use nested <div> elements to add further structure to 
your fies for dariy or tying. But don't add structure 
unless you really need it 


= Once you have grouped together sections of content 
wilh <div> elements, you can style the «dios just ike 
you would any other block element For example, you. 
can add a border around a group of elements using 
the border property on the «v» they are nested in. 

= The width property sets the width of he content area 
ofan element 


= The total width of an element is the width of the 
content area, plus the width of any padding, border, 
and margins you add. 

* Once you set the width of an element, it no longer 
expands to f the entire width of the browser window. 

* Textadgn is a property for block elements that añgns 
al ining contentin the block element, о the center, left 
‘or right. tis inherited by any nested block elements. 


You can use descendant selectors to select elements 
nested within other elements. For instance, he. 
descendant selector 

dv be (.. 
selects all <h2>s nested in <div> elements (including 
chidren, grandchildren, etc.) 


You can use shortcuts for related properties. For. 
instance, padding-top, pading- ight, padng-botom, 
and padáing-eft are all related to padding, and can be 
specfied with one shortcut rule, padding. 


Padding, margin, border, background, and font 
properties can all be specified with shortcuts. 


The «span» nine element is simar to the <div> 
clement: itis used to group together related inline 
elements and text 


Just ike with «div», you can add «span» elements to 
classes (ог give <span> elements unique ids) to style 
hem. 


The <a> elements ап example of an element with 
diferent states. The main <a> element states are 
urvisited, visited, and hover. 


You can style each of hese states separately with 
pseudo-ciasses. The pseudo-lasses used most often 
with he <a> element are ink, for unvisited inks; 
sited, for visited inks; and hover, for the hover state. 
Pseudo-ciasses can be used wih other elements to, 
notjust <a>. 


Additional pseudo-classes are the hover, active, 
focus, frst-child, and last-chid pseudo classes, 
among others. 


Since ус 


HTMLeross on Vacation 


rain Power to Work ОР, 
‘ation in this chapte! 
the next one. 


ou ve got a Super B 
So де across a vac 
en ben beben 


we 
и. Don't 


divs and spans 


ers pris 


Heres a box that has all the widths labeled. Your job was to 
figure out the width of an entire box Here's the solution. 


3042454200410 4 24 20 = 264 pels 


NI uon 


Зо now that you understand widths, whats the total width of the elixirs Бок? To start with, 
we know the content area îs 200 pixels. We've also set some left and right padding that 
affects the width, as well as a border that’s set to "thin Just assume а thin border is 1 pixel 
thick like it is on most browsers. And what about margins? We set a left margin value, but 
mo right margin value, so the right margin is 0 pixels by default. 


Your job was о figure out the total width of the elixirs «div». Here's the solution. 


20 +20 +200 +1+ 1+ 0 + 20 = 262 


ы» 


єм 


Ge ee 


<div>. In your rule, set the color property to #@12С47. Also label the elements 


in the graph below that are selected. Heres the solution. 
Heirs h3 C 
= calor: RAD, Hees the ale We select any d. 
j destendant of an element ith the id бу. 
Md here's what the graph leks hike 


you ara here + 467 


е page. Add a <div> to make this into is own logical section. After you've done that, 
Ца ОН style it with these properties: 


Ee Lets nike the tet val 


font-size: 508; ‘You know, FINE PRI 
text-align: center; 
line-height: normal; Cm nd lets center the text 
margin-top: 30px; 

^ 


dd some br margin bo 


te beating re 
Phe «die ta 
around the сорун ‘And give it an id named “footer” 
information 8 
ү c 


<div id="footer"> 


appearing on 


R An even better solution would be to change 
<p> to <amall>, which is an element designed 
specifically for "mall print” Tey it! 


</p> < 


‘And here's the CSS for the g 
becker “ * 


font-size: 50%; 


line-height: normal; 
margin-top: 30px; 
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греп you 


divs and spans 


"oe 


Your job was to finish adding the <span> elements to the rest of the music. 
recommendations and test your page. Here's the solution: 


<a> 
<1i><span el. 


еа“>ъзшайна Bare/epan>, 


eben classm"artkst">c1 aid 


al le</span></Li> 
<Lipgepan classs'ed'»;ien тє Falls€/apan>, 

<span classs"artist's:c-o 7</span></11> 
<Lipeepan classs'cd'sri:ti </span>, 

<span classs"artist'si.7.7. sukoné/apand</Li> 
<1i>cspan 

<span 
<ibespan 


е 1e Rol «јаран, 


«арап classe"artist"yirisn aus el basel ue 
чш» 


playing at the Lounge 


We're frequently asked about the musie we play at the lounge, and no wonder, 
їз great stuff. Just for you, wa keep а list ere on the site, updated weekly 
Enjoy. 


+ Budana ear, Claude Chaile 

+ When E Fas, Zero 7 

* Earth 7, LJ. Bukem 

+ Lo Rol Est Mort, Vive Le Rofl, Enigma 
* Music for airports, Brian Eno 


exercise 


ыш 


Your job is to give the "detailed directione" linkin the lounge some style. Just like the 
Ser link, we want all unvisited links to be aquamarine, and all visited links to be gray. 
However, we don't want the other links in the lounge to have any hover style...that's 
unique to the elixirs. So, how would you do it? Fil inthe blanks to give the detailed 
directions" link, and any other inks you might add to the lounge later, this style. Here's 
the solution. 


r п your i 
А — 


the cascade rules. Here's the solution. 


higrentea 9 allip ооз em ool 
pimg 002 green. oio spaned oll 
айак oll Helixirs ht lol sidebar 100 
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11 layout and positioning 
* 


* * 
Arranging Elements * 


You can bet all my divs and 
spans are in the right place 


It's time to teach your HTML elements new tricks. We're not 
going to let those HTML elements just sit there anymore—its about time they get 

ир and help us create some pages with real layouts. How? Well you've gat а qood. 
ind <span> structural elements and you know all about how the 
box model works, right? So, now it's time а use all that knowledge to craft some reat 
designs. No, we're not ust talking about more background and font colors ute 


feat for the «dv: 


talking about ful-blown professional designs using multicolumn layouts. This i the 
chapter where everything you've learned comes together. 


an 
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examining a ee page 


Did you do the Super Brain Power? 


If you did't do the suree ше дум темат at 
the end of the last chapter then march right back. 
there and do it Ies required. 


‘Okay, now that we have that out of the way, at the 
end of the last chapter, we lefi you with a bit of 
cliffhanger. We asked you to move the elixirs 
<div> up under the logo, and then add one like 
property to the elixirs rule in your CSS, like this 


Moat: right; — 


And, wow, what а difference one property can. 
make! All of a sudden, the page has gone from a 
fairly ordinary-Jooking web page toa great-looking 
web page with two columns, rs immediately more 
readable and pleasant to the eye 


So what's the magic? How did this seemingly 
innocent litle property produce such big effect? 
And can we use this property to do even more 
interesting things with our pages? Well, of course, 
ut first, yore going to need to learn how a 
browser lays ош elements on a page. Once you 
now that, we can talk about all kinds of ways you 
сап alter how it does that layout, and also how you 
сап star to position your elements on the page. 


Here's the good news: you already know about 
lock elements and inline elements, and you 

even know about the box model. These are the 
seal foundations of how the browser puts a page 
together. Now all you need to know is exactly aw 
the browser takes all the elements in a page and 
decides where they о. 
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layout and positioning 


Use the Flow, Luke 


‘The Flow is what gives a CSS master his power. W's an 
energy field created by all living things И surrounds us 
and penetrates us, I binds the galaxy together...oh, sory. 
Flow is actually what the browser uses to lay out a page 
of HTML elements. The browser starts at the top of any 
HTML file and follows the flow of elements from top to 
bottom, displaying each element it encounters, And, just 
considering the block elements for a moment, it puts a. 
linchreak between each one. So the first element in a 
document is displayed first, then a linebreak, followed by 
the second element, then а linebreak, and so оп, from the 
чор of your file to the bottom That’ ow 


Mrd here's the HTML flowed 
Here's a little “abbreviated” HTML- ento a pate 


Each blac element is 
taken in the order i т 
appears nthe кайыр, 


Ed 
ard placed on De pate X 
— 
RSS) 


penam 
ebrei 


Notice that elements Р 
take wp бе Ы width z 
of the pase 

سج 


you are hes. as 
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playing with ow 


Here's your page Flow 


the Мый elements и 
lange hn” hee » 


BE the Browser 
| Open your “ounge nl file and locate 
all the block elements. Flow each one on 


to the page to the left. Just concentrate 
оп the block elements 
nested directly inside the 
hody element. You can also 
ignore the “float” property 

їп Your CSS because you 
don't know what it does yet. Check your 
answer before moving on. 


Here are all the blot 
elements You need te 
tonplete the job 


— 
— 
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What about inline elements? 


So you know that block elements flow top to 


om, with а linebreak in between each element, 
‘enough. What about the inline elements? 


Inline elements are flowed nest to cach other, 
horizontally from top left to bottom right, Here's 


how that works. 


IE ue take the inline 
Content of hin «p> element 
ard flow it onto the pase 


Smadar st the bop left ^N 


layout and positioning 


Here's another little 
эте of HTML 


| 2 


Shin us <emany evening</em> for 
these and 244 etie other wonderful 
<a hraie"beveragas/alizix 

hii” title-"Head First Lounge 
Blixira>elixirs</a> 

ES 


Tie bre elements are id nert te one 
another horizontally, a len as theres 


[- E ee Киси) 


тее on Ehe vight be place them Rly 


So what if we make the browser window 
a Ийе Балот or we vedete the size ef 
the сөен area with the width property 
Then here's less төө to pate the inne 
elements in. Lets see how thi works 


New the content has been Powed left to 
ight until there's vo more room, and then 
the content is placed on the wert line N 


А 

Her, the’ ref Fk al бє ме 
thnx kam Note Bat tk 
aal ca af an ge deret The 
brower bet nine dens a 
ane rant aa fit Be que 


N 


the bower ha ben бе бой op a Hele 
prostant . 


Ard if we make the tontent are: 
leok what рот The browser 


as necessary to flow the content: into the spice 


el 
— 
cee, | SO 


ee и mn ines 
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how flow works 


How it all works together 


Now that you know how block and inline elements are 
owed, ets put them together. Well use a typical page 
with headings, paragraphs, and a few inline elements ike 
spans, some emphasis elements, and even images. And we 
Can't [orget inline test, 


Here, we've veized he brewer 
indo регин all Be content 
Tako a йе шен size 


D, ‘Things Йө» the sane way, Aeg in‏ يا 
a Sent Dene йөр he‏ 
AENEAN эр more vertical lines to Fit:‏ 

ath Wack element 
flowed bof to bottom 

ae yo'd espert, witha 
edere n been eth 


228 — — 


Wr 


7 
EE Jed te ine Gente ian 
QS 2 ET 


NC LA ned fron the 


—— 0 5 
carter rea — 
»| — — 
cm БЕШ 

M he ne ented ша ыа fla be 


ibs of the content area, then it placed 
ere others, nare vri roon i made for C 
ere id i гөм Now the black elements take vt 
бе content and it ontnatd on De rext ne How the dent 
content haste Fink a alle 
po 
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One more thing you should know about flow and boxes 


Let's zoom in just a bit and look at one more aspect of how the browser lays 
ош block and inline elements И turns out that the browser treats margins 
differently depending on which type of element is being placed on the page: A 


When the browser is placing two inline 
elements next to each other... 


When the browser has the task of placing two inline elements side by side, and 
those elements have margins, then the browser does what you might expect. It 


creates enough space between the elements to account for both margins Во, 
Ж the left element has a margin of 10 pixels and the right has a margin of 20 
pixels, then there will be 30 pixels of space between the two elements 


* 


When the browser is placing two block 
elements on top of each other... 


Here's where things get more interesting, WI 
elements on top of nes their shared margins together, The height 
fof the collapsed ma 


n the browser places wo block 
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questioning margin: 


there are no 
Dumb t Questions 


О: soli havea block clement wth azero margin, anda СЭ what nae one alamant теней inside another and they 
bloc element below it with a top margin of 20, the margin Бой have margins? Can they collapse? 
between en would end up being 20? 


Д: es at can nappen Hers hou a ыт out when тиу wit: 
Д: нән one ol ne nro в bigger tan he marg becomes ree you havo wo елей mais cig, ау wi ces 
fhe large o wo een one rag . need ie fa cer Note ba fe er 
жета cave, say, 10 paaks, ery get laa terior a order те тарий нигим oy ON 


10 pixels ttal collapse. uli you remove the border, hey wll. This is sometimes 
рий when you frst see it happen, so puti in the back of your 

О; can inina tens rasty have тиин? rind tor nhen оош 

= Thay suro can, eg tae cen айды С So how йу does tet went as an inina tet since 
margas of inina elements. The one exception в Images. t's very ts Content is not an element? 
common o nol oniy sel margins but also borders and padding on 
images And wile we aren't going to be sting any Inine element 2 Even if textis content, tho browser needs to fow 1 onto the 
margins in his chapter, we wil be setting Ie border on one a Ме page, right? So the browser ures out how much text fas on a given 
ite Jine, and than treats that Ine of text as fit were an Inline element. 


The browser even creates а Ше box around IL As youve seen, If you 
resize the page, en all hose blocks may change as the lax i reft 
within he content area 


Weve been through seven pages 

of "flow" When are you going to 

explain that one little property we put 
into our CSS file? You know, the 


float: right: 


‘To understand float, you have to understand flow. 
i might be one litle property, but the way it works is closely ted to 
how the browser flows elements and content onto the page. But hey 
you know that now; хо we can explain float, 


Here's the short answer: the fLoat property first takes an element 
and flats it as far lef or right as it can (based on the value of float). 
Ti then flows all the content below it around the clement. OF course 
there are а few more details, so let's take a look. 
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How to float an clement 


Let's step through an example of how you get 
an element to flat, and then we'll look at what 
u does to the flow of the page when you do. 


First, give it an identity 

Les take ane of these paragraphs and give 
жапай, We'd like to call ix the "amazing. 
Seating paragraph," but wl just call it 
"amazing" for shart- 


Now give it a width 

A requirement for any floating element is that it 
have a width. We'll make this paragraph 200 pixels 
wide, Here's the rule: 


damazing ( 
width: 200px; 
) 


See- er- 
Lee dee tent 
eee ve lo dt 
Шы nd le ag 
Кыыс wm deere 
Saa o mna sp bonde een a 
Badk detent he adr beler 
and after them. 
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how float works 


Now float it 

Now lets add the 10а property The float 
property can be set to cher left or right. Let's 
Sick with right: 


famazing ( 
width: 200px; 


Now that we've floated the "amazing" paragraph, 
Jet's step through how the browser flows it and 
everything ele on the page 


@ First, the e Flows the (2) When the browser tnit 
elements onthe page at wud the Floated element, placer tal 
staring at the top oF bhe ile and the ay ta the right И ae тне 
roving toward the bottom the paragraph fron the flow te 


its Plating on the page 


Notite that the 
tk elements are 
пеон veder 
The Rated cement 
Thats because the 
flaked element ктө 
longer part of the 
sored flow 


00 Beane the floated parish 
Vas been трий from the normal 
Flow the Bak elements are Filed in 
Ike the paragraph int even there 


Ы 
CH Bat де Бе ine е 
are relin, Bereit бе 


boundaries of the Pleated element 
So they are loved around it 


Hes shen te 
sie done re 
fied the б 
Wet denn б, 
few rand the 
[күн 
Basing denet 
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Behind the scenes at the lounge 
Now you kcal about Пом and how oed elements Геи 
epe he page Ll hack tele Кер ae 


and see how this all its together. moned the drs doo vp jt below 


the lege at the tap of the page. 


- -n 


Masin the «die alloud ы te Raat it tothe 
i ard then hve Bh enbe page lon rend 
TE HË we а ef the ens «die below the mesic 
— the йин wld have been 
ates wight ar mot of the page had been fad SS raceme to the Hed Pt 


Al thee elements flow the 
дин» in the HTML, зө they 
are Bened around it 


Remember that the ene <i> i ating 
sn by of De page ll the ether elements 
are underneath fb the nine Content 


recs the йин ee hen Oey 
are Roving no the page СЕ 


Hie reee that the tert ware 
trad the bottom of De es . 
because the te le contained in a 

Мой element Dat the with of 
be tte IF рыз бе wrap bry 
кече yor brewer window oil 
die teak waft детей the ens 


youare here» 431 
www.it-ebooks into 


a now assignment: starbuzz 


Move the irs <div> back to its original place below the main content, then save 
Exercise and reload the page. Where does the element fat now? Check your answer in the 
back and then put your elixirs <div> back underneath the header. 


Nice stuff. Do you think I'm going to 
watch these fantastic lounge designs 
and not want you te improve Starbuzz? 
Youve got a blank check. take 
Starbuzz to the next level 


looks like we've got а new assignment, Starbuzz 
really could use some improvement. Sure, you've 

a great job of creating the typical top-to- 
botom page, but now that you know ow, you 
should be able to give Starbuzz Coffee a slick new 
look that is more user-friendly than the last design. 


We do have a litle seretthough...we've been. 
working on this one a bit already. We've created 
an updated version of the ste. Your job is going 
tw he to provide all the layout. Don't worry we'll 
ring you up to speed on everything we've done so 


faris nothing you haven't seen before. 
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The new Starbuzz 


Let's take a quick look at what we've got s0 
far, starting with the page as it looks now. 
Then we'l take а peek at the markup and 
the CSS thats styling it. 


We've gat a header now with a new spill y Starbuzz loge and the 
чүзү minion statement. This is actualy just a GIF wane 


We've got four attore the header, 
a man tontent section a section 


т» 
эйе, singe шы the NS 
hos Machine! and a Tober 

PISIS S UE 


БЕ с 


Each section la a «йе that tan 


RENE aia re 


22; 8 
— 
-e fr Be 
теа whl and ten 
TE, ake wit as one 
im 


Here's e "бек Machine" area Tis ints bo 
a теч area of Starhaz Coffee whee ү» tan 
эе yom toffee beane online. This hk doe 


шеклеу нышы EL 


Bean Machine i an feng chapter: 


Notice that we styled the 
Here's the footer. lt doesn't ik 


link in an interesting va) 
мє a background mage jot a with dotted underlines 
background tolor. 
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looking over the markup 


А look at the markup 


Now let's take a look at the new Starbuzz markup. We've taken each of the logical sections and 
placed it into a <div>, each with is own 34, Beyond the «divo and «spans, there's really 
nothing here that you hadn't already seen by about Chapter 5. So, take a quick look and get 
familiar with the structure, and then turn the page to check ош the CSS style. 


Hee all the wl 
HTML administraria. 


سے 


Fete by a «бе for 


<img res aer beser gif" alt='Starburz Coffee header image" 
2 


kent, corse, GOALITY CAFFEINES/AI> 

= 
Ht Starbure Coffee, we are dedicated to Filling all your caffeine needs through cur 
werter coffees and teaa, Sure, ме want you to have a great cup of coffee and а great 
cptenizes caffeine levels, So stop hy and fill your cup, sr order online wich our new Bean 
Machine online order form, and get that quality атыша coffem that you know will meet 

E | 

= 
PPTP 
F 
eee about caffeine on the eee. 
atop by and рау then a visit. х 

чю 

oun eee 

E 
8 

E 

= 
you cam enjoy Gearbure just about anivhere, And, of course, the big news this year 
J 88 


er COFFEE гурде суы» 


en got a variety of caffeinated beverages to choose 
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This а more of the main content 


aa себе ver here 
\ 


(————— 
Seo Au шы erre Dei Cs tese 
рес ш eec TT 
.. Eten rect sues 

ES 


ЕЕЕ 
& кеш тч. сті: title="The Bean Machine">ican nes, 


E 
E 
p: 
Selen dener 
eee gif" eee Machina re 
We ext а le De Boe Mathie 
Ed Eb ge CN d el uae Hm 
eae ‘wondey what that could mear” 
„ 
“</span> 
E 
pis 


272 8 
(EE you want], packaged, and shipped to your door 


ча» 


p 


ai ам 
pow [ГТ we have B ue that 


рге 


makes up the footer of the page 
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beginning starbuzz style 


And a look at the style 


Let's get a good look at the CSS that styles the new Starbuzz page. Step through 
the CSS rules cache While the new Starbuzz page may look a Ше advanced, 


you'll see it's all just simple CSS that you already know 


— 
background-color: #b5a789; c^ 
Te ШЫ мл as mis er 
Шыл ш” Sree ier 

Д margin of the body to O- 

eee estra room around the 
к=н ps елы 
Es pod 

i 

kat 
— Y 

1 ath logjeal section In 

a eie Dai e 

Lord font size, adding padding 
M fot ace non 
тамі: ‘the ease of main and 
— Ripe Soe ae es the sidebar —epcitying a 

— 

mem 

i 

c: ue. & fd Bes toe йөз om the t 

Шш sidebar «div», and likewise 

die A dedos ш i‏ ا 

= * 8 мей there as well 
و‎ 
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For then te les бе Sue CSS, ve we he 
IET a nd dad pedet fo je Be nk 


aliak q 
‘color: вьлвввв: 
. nar Weve removing the default underline tat links set by 
— LEM Mn 
кашы ( 


vele deseen: 


e uisu MA мене getting a rite dotted underline 


: lec on бе Inks by ы 

eee een, thin dotted #67567; wih د‎ dotted 

| ыча мш of cin 
Т ia peat example of ain the border 

roperby en nn element 


Weve setting the border-bottom 
col forthe em decet 


Let's take Starbuzz to the next level 


Here's the goal to turn Starbuzz Colle into the site on 
the ight. To do that, we need to move the Bean Machine 
sidebar over to the right so we Ve got a nice two-column. 
page. Well, you've dane this once already with the lounge, 
sight? So, based on that, here's what you need to do: 


© Give the clement you're going to float a unique 
name wing an 1. Thats already done, 


Ө Make sre the cements HTML is jun below 
the clement you want ito lat under. in his 
case, the Starrs header 


Ө Sea width on the clement 


© Fion the element to the eft or the ight. I oaks 
Hike you want tn Поа tight 


L's get stare Ina espe eps, we shold have the м ا‎ ынай. 
Вий CEO sending afew ChaiTeas ver on the house. эу сес 
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‘moving the sidebar 


Move the sidebar just below 
the header 


lesa fact of life that when you float an element, you 
need to move the HTML for the element direcdy below 
the element diat you want it w follow. In this cas, the 
sidebar needs to come under the header. So, go ahead 
and locate the sidebar «iv» in your editor and move 
the entire «di v» to just below the header <div>. 

‘You'll find the HTML in the fle “index tn” in the 
“chapter! 1/starbuzz” folder. Mer you've done that and. 
saved, reload the page 


New the sidebar shoud bt on 
tap of the main content area 


be 


Set the width of the sidebar 
and float it 


Let's set the widib of the sidebar to 280 pixels And to float the 
sidehar, add a float property to "chapter L/starbuzz cs", like this: 


ing an d seletor $o MÀ 
th the id "sidebar", which we 
ton tthe <div> For the sidebar, 


Ј 


daidebar ( 
background: #efe5d0 url (images/background.gif) bottom right; 
font-size: 1051; 
padding: 15рх; 
— — де an 10px 10px; 
Bloat BORE Wve setting the width of he 
— ele area te 200 ps 


D 
Ro мъ we've (hebben the sidebar to the right Remember, thi: moves 
the sidebar as for right as publ belou the header, ded ae ect 
the sidebar Fran the ме flos Everything бе onthe ade the 
#ТМ ө bo mete vp and wap ed 
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Т have on idea. In the future, why 
don't we float the main content to the 
left, rather thon the sidebar to the right? 
‘Since the main content is already at the. 
top, we wouldn't have to move things 
around, and we get the same effect. 


there are a couple of issu 
Оп paper, this looks Ше а great idea. What 
we do isset a width on the main content 
<div> and float it to the let, and then let 
the rest of the page Dow around it, That 
way, we get to keep the ordering of the 
page and we also get two columns, 


The only problem is, this doesn't result in а 
very nice page. Here's why: remember, you 
have to set а width on the element that you 
are going to float, and if you set a май 

оп the content area, then йз width is going 
to remain fixed while the rest of the page 


resizes along with the width of the browser 
Typically, sidebars are designed to be 
narrower than the main content area, and. 
often look terrible when they expand, So, 
in most designs, you want the main content 
area to expand, not the sidebar 


But we are going to look at a way to use 
this idea that works great, So hang on to 
this idea, Well also talk a litle more about 
why you'd even care what order your 
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testing the float 


Test driving Starbuzz sia 


Make sure you add the new sidebar properties to the 
hac fle in the “chapter! L/starbuzz" folder, and 
then reload the Starbuzz page. Lets see what we've got. 


Ham, this lacks prety good, but if you Flip back three 
ago pull ste neve rat gate where we want $o be 


S 


The main tontent ard the Ф тафи 


ard the rights bet they 
der realy lok Hite e 


Soe EM 
Look at how the And, did we mention cere? We've jus started famlingthe guys dong all the 
а Ош = 
8 be —— ас 
те together. Theres meme 
ње ты Ш 
— ee eem 
Pip ЗЕТЕ 


ЗАМАНА а Why Yaa ca order Шош dcr 
pom ES 


‘ei seh EE 


Wieder evt найы a, gn far yoat em 
КП 


dod the tert wraps энил and under the sidebar, whith doemt make this 
lec like Eve columns er Hmm, that и actualy how the lange worked 
does joe we shoud have certet that 
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Fixing the two-column problem 


AL this point, you might be realizing that page layout is a bit of an ан меле 

got a set of techniques for laying out block elements, but none of them is 

perfect So, what we're going todo i solve our problem using a common 

technique that is widely used, 05 not perfect, as you'll see, but in most cases 

it gives you good results. And after this, you're going to ser а few other ways 

to approach the same two-column problem, each with its awn advantages 

‘What's important here is hat you understand the techniques and why they The [vt thing be 
work, so you can apply them to your own problems and even adapt them remember ie Hat the 
where necessary sidebar ic floating m 
the gage The main 


и 


So wha 
onkent area M 

ia at leak as big as e 
sidebar? Then itz tentent wil 
еен deeds to the sidebar, 
bt rek all the өү. 


— nies 


“Then ell have separation between 
the bu, and sinte margins are 
transparent and don't show the 
background image, the Байрон 
talor of the page bf shuld show 
through And that's what weve 
looking for (fi back a Few pager 


ard yell see) — . e re 


ide as the sidebar 
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using margins for t 7 


<r" your pencil 


What we want to do is set а right margin on the main content section so that its the 
same width as the sidebar. But how big is the sidebar? Well, we hope you aren't already 
rusty since the previous chapter. Heres all the information you need to compute the 
width of the sidebar. Check your answer in the back of the chapter. 


#sidebar ( 
background: #efe5d0 url(images/background.gif) bottom right; 


font-size: 


1051; 


ran de. 
dee Ope ops пори 10px 
ger: рю 
ae, NN 
A tes rece Cia 


of the sidebar in thi vule 


Setting the margin on the main section 


The widih of the sidebar is 330 pixels, and that includes 10 pixels of left margin on 


the sidebar, which will provide the separation we need between the two columns. 
‘what the publishing world calls a “gurter"). Add the 390-pixel right margin to the 
Aman rule in your "starbuzz c" le like we've done below- 
fain ( 
background: fefeSd0 url(images/background.gif) top left; 
font-size: 105%; 
padding: 15px; 
margin Opx 330px 10px 10р: 
Й N 


тете changing the right margin b 


te matth the see of the sidebar. 
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Test drive s= 


As usual, save your "sarbuzz se" fle and then 
reload “index hti You should now see a 
nice gutter between the two columns. Let's 
think through how this is working one more 
time. The sidebar is lating right, so its been 
moved as far to the right as possible, and the 
whole <div> has heen removed from the 
normal flaw and is floating on top of the page, 
Now the main content <div> is still taking 

‘up the width of the browser (because that's 
what block elements do) but we've given ita 
margin as wide as the sidebar to reduce the 
width of the content arca. The result is a nice 
foscolumn look, You know the box of the 
‘main <div> still goes under the sidebar, but 
we won't ell anyone if you don't, 


By eg the margin 
of be man chio, were 
тей the lion of a 


rcr by, e 77 


with a getter în between 


prre 


n се 


We've gota problem When You vesize your brewer to a 
wide potion Ehe Tooker and the sidebar start bo overlap 


layout and positioning 


ae 
== 


Uh oh, we have 
another problem 


As you were test driving the 
page, you might have noticed 
a lile problem. И you 
resize the browser to a wide 
the footer comes ыр 
derncah the sidebar Wi? 
Well, remember, the sidebar is 
not in the Dow, so the footer 
pretty much ignores it, and 
when the content area is too 
short, the footer moves right up. 
We could use the same margin 
trick on the footer, but then the 
Tooter would only be under the 
content area, not the whole 
page. Geez. So, what now? 
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a margin alternative 


Wait a sec. Before you get way into 
solving that problem, I have to ask, why 
did we have to go to all this trouble of 
using а margin? Why don't we just set 
the width of the main area? Wouldn't 

‘that do the some thing? 


That sounds good...until you try it. 
"The problem with setting a width on both the 
content arca and the sidebar is that this doesn't 
allow the page to expand and contract correctly 
because both have fixed маа, Check the sereen- 
shots below that show how it works (or rather, 
doesn't work. 


But thisis good. You're thinking in the right ways, 

and a little later in the chapter we're going to come 
back to this idea when we talk about “liquid versus 
frozen" layouts, There are ways to make your idea 
Work if we lock а few other things down fri, 


find when the browser window is made 


ç small, e tuo start to overlap. 


= 


When the browser а wide, the 
ke totaly separate 
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Solving the overlap problem 


"To fix our overlapping problem, we're going to use 

another CSS property that you aver sern ун: the 

eas property, and heres how i work 
ees what we te The 
a! dim u herk rod 
Dak өе fele cer n tm 
obs and өөн th 


e dnas di 
Sey 


“Tha apes bacc the sidebar has been lad ark of the Rew 
Seen pk bn ct eco nd lein red n 
e мын, pring Ue ddr дену тенебе th ve 
ebene dee hine dete i il vec te borders oF 

the scar d wap ne dones aod ©) 


You can use the 


layout and positioning 


— 


‘iv idan” 7 vidc sidebar 7 


iS clear property on an element to request that as the element is 


being owed onto the page, no floating content is allowed on the lef, right, or both 


sides of the element. Let's give it a try. 


footer ( 
background-color: $675c47; 
color: 
text-align: 
padding: 
margin: 
font-size: 
clear: 


П 


Now when the browser places the 
elements on the page, it looks to sce if 
there is а floating element to the right 
side of the footer, and if there is, it 
moves the footer down until there is 
nothing on its right, Now; no matier 
how wide you open the browser, the 
footer will always be below the sidebar. 


Don't even 
think about putting 
а floating element 1o 

the right of me. 


Now the бый а plated belou 
le det c al ee are va 
beben deer 27 


ne floating tanker 
We wight of the footer. 


Here we've adding a property te 


c cor vale, which says that 
lioed on 


( — — 


divid- sidebar 7) 
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more about columns and floats 


Test drive S 


Go ahead and add the clear property to 
your "каго сан" file in the footer rule, 
and then reload "index iml". You'll see that 
when the sereen is wide, the footer now stays 
belaw the sidebar Not bad! 


Now at this point the page is ooking pretty 
good, but there are still а few improvements 
we can make. For instance, we'd like each 
column to come down to meet the footer 

so they ме even—notice, as it is now, there 
isa gap either between the main content 
and the footer (f the browser window i set 
wide), or the sidebar and the footer (if the 
browser is set toa normal width). But fixing 
this isn't that easy wing £102t, so instead, 
we're going to move on and look at a few 
nore ways to lay out these pages using other 
CSS techniques, As you're going to see, 
there are many ways to do things in CSS, 

and each method has its own strengths and 

Weaknesses. 

‘What's important to you is that you 

understand the techniques so that you can 

apply them when and where you need to. 


there are n 
Dumb Questions 


О; can tat tothe center? Do margins collapse on sted 


elements? 
No, CSS only allows you to foat an 


‘erent to ha fto igh. But you tink 
about you were to foat to the contr, 
‘than bin content unde th floated 
‘element woul have to be owed around both 
‘eso your element, which would be quite 
‘icky to get lo work in a browser. But опе of. 
"ho nou layout solutons Dal wll be coming 
in utr versions of CSS may provide a way 
lodo uel have lo wal and see. 
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they don and Its prety easy 
to see why Unike block elements hat 

же owed on е page, foaled elements 
же just, wel, ating. In other words, he 
margins ol foaled elements aren't actually 
touching the margins of he elements in he 
‘somal Пом so they ca be collapsed. 
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low aur aeter problems are shed. The 
eater wll aa: be below the sidebar, a 
matter how narrow or vide the browser 


Bul this raises a good point and iene а 
‘common eor layouts. уой have a maln 
“contant area an a sidebar, itis common lo 
“sat a lop margin on each. Then, you foal 
"ho sidebar, ll tas a margin, and hat 
marge won be collapsed wih whatever is 
abore it anymore. So you can easly end up 
having diferent margins on е sidebar and 
on he main content I you don remember 
that foaled elements don't collapse margins 


О: can tat an inte lament? 


— кани мазон 

ом ar kenne Que a) toat an wage arch a 
Paap ara se ort how around Dor faro a 
Paige te get сот, nd possbiy ore You 
Canal ray oar lc dro. Ша ва rtc 
p^ 


layout and posit 


ls it correct to think about floated elements as elements 
tha are ignored by block elements, while inline elements know 
they are there’? 


Д: ves, hats a god way ol kings cnet 
rete abe aamen abays om rand fd net 
T 
ar fore оа нога as nomnal. The rate van you sat 
the ear propert on a wok olamen wich самара back eet 
холот Gori tw are po fug emen та io ton he 
FS lel or botn sides, depending on he al ol dear 


Right. That happens becau: 
way we ordered the <div>s. 


The only thing T 
derit like about this design is 
‘that when I view the web page on 
ту smartphone, it puts the sidebar 
content above the main content, so I 

have to scroll through it. 


of the 


This is one of the disadvantages of the way we've 


designed this page 


because we need the sidebar to 


be located just under the header and before the main 
content, anyone using a browser with limited capabilities 
(PDAs, small mobile devices, sereen readers, and so 

оп) wil see the page in the order it is writen, with the 
sidebar first, However, most people would rather see your 
main content before any kind of sidebar or navigation 


So let's look at another way of doing this, which goes 
back o your idea of using float “elt” on the main 
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tus Look Ма, No CSS! 


Want to know how your pages are going to look to your users under. 
bad conditions (ike on a browser that doesn't support CSS)? Then 
‘open your “index html fle and remove the «ini from the <head>, 
‘save, and reload the page in your browser. Now you can see the 
Teal order things wil be seen in (or heard from a screen reader), Go 
‘ahead and give it a try. Just make sure you put it back when you're 
done (after all, this is a chapter on CSS). 


— 
v (he most part vere in 
seed shape. ЕЁ ail very readable, 
although the Bean Machine dees 

ain content, = 
ch probably ant: what we want 


Righty tighty, lefty loosey 


Let's get the Starbuzz page switched over so that the main content is floating lef 
You're going to see that the mnemonic righty tighty lefty loosey holds true in the 
CSS world 100.. well, for our sidebar, anyway: Here's how we convert the page 
cover. just a few simple steps. 
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layout and position 


Step one: Start with the sidebar 


We're basically swapping the roles of the sidebar and the main content area, The 

content area is going to have a fixed width and flat, while the sidebar is going to wrap. 
We 

visually separate. But before we start changing CSS, go to your "index h file and. 

Afer you've done that, here 


around the conte aso going to use the same margin technique to keep the two. 


move the “sidebar” «à» down below the "main" <! 
are the changes you need to make to the sidebar CSS rule: 


feidebar ( 
background: #efeSd0 url (images/background.gif) bottom right; 
font-size: 1058 — Been the si 


har ie now gong bo low 


padding 15px: under the main content, we verá bı move the 
margin Opx 10px 10px 470p. large margin bı the sidebar. The total width 
seks — روو‎ of the mäin tortent area la 4710 рна (бе 
— — ad and compute that youre in all that 
) 8 Free time ү» have: Compute it in the sae 
Wee setting a fixed width on Өе main чүзүн dd fo he Ska. Vo dd 
content <div, за delete the sidebar width row that vere going to set the width of 
Property alongwith the flat the main content area to 410 piel) 


Step two: Take care of the main content 
at 1 

——— P 

а атс tn onc oa 

REC dee ch 


‚ ] RO Wiege 
Step three: Take care of the footer 


Now we just need to adjust the footer w clear everything о the left, rather than the right 


because we've going b 
pele 


bo Feat the main <div> {в Be left 


#tooter ( 
background-color: #675047; 
color tetesa 
‘text-align canter? Change the clear property te have 
padding 15px a ake of left, rather thn cai 


Кернеу 
чүбе oter ырш 
left; e 
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contemplating а better solution 


A quick test drive а= 


We've already said there might bea few 
problems with this method of floating 
the content to the let. Do a quick test 
drive before you move on just to see how 
this is ай working. Go ahead and make 
the changes о your “starbuzz.es" file 
and thea reload "index html” in your 
browser. Get a good feel for haw the page 
performs when it is resized to narrow; 
normal, and wide. 


= | چچ‎ Ee 


ebay, hi lacks pretty sed, and we 
have the cios in the iht order row D 
iE nek yt bot the sidebar expands; 
lok a lot better Fined. Sidebars are 
often vied for navigation and they don't 
Jook very good when expanded 


When we Float the sidebar «div> vigt, 
‘hen the design stay nice and tight, 
allowing the content to expand, but if we 
Жы the main content to the left, the 
design Fels to loote, allowing the sidebar 
to expand 


г SAMO —— 
POWER 


Design-wise, the first design worked better, while information-wise, the 
second works better (because of the placement of the <div>s). Is there 
a way we can have the best of both worlds: have the sidebar at а fixed 
width, but the main <div> stil first in the HTML? What design tradeoffs 
could we make to get there? 
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Liquid and frozen designs 


All the designs we've been playing with so far аге called [iid layouts 
because they expand to fl whatever width we rese the browser to. 

hese layouts are useful because, by expanding, they fl the space 
available and allow users to make good use of their screen space. 
Sometimes, however, it is more important to have your layout locked 
down so that when a wer resizes the sereen, your design still looks as it 
should. These are called аге liat. Frozen layouts lock the elements 
dawn, frozen to the page, зо they can't move at all, and so we avoid a lot 
of issues that are caused by the window expanding Let's give a frozen 
layout ашу. 


Going from your current page toa болеп page only requires one addition to 
your HTML, and one new rule in your CSS. 


HTML changes 


In your HTML you're going to add a new <div> element with the id 
“allcontent” Like is name suggests this «43» is going to go around all the 
content in your page. So place the opening <div> tag before the header 
dio» and the closing tag below the footer «div». 
<body> 1 Ма а кеч ао with the id of “alleontent’ 
— erd d the other cements inthe de 
‘<div id="header"> 


CSS changes 


Now we're going to use this «аэ to constrain the size of all the elements 
and content in the “alleontent™ <div> to а fixed width of 800 pixels 
Here's the CSS rule to do that 


o set the width of lee 


We betteln 
шо tack ты wil save í 
Gwen q , eee e Ro ya 
883985 voor, 
pudding Û аме bite Fa ine 
11 yg thn sn ad an ping 


and ge tits oun background tolor. oul see 
би helps t 


he whole Page together 


ier “aleontent” «diosa hay: 000 pd, even when the brower is resized, ө weve 
ly Frozen the <div> to ith everything vide i 
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frozen layouts 


A frozen test drive ıe 


Go ahead and add this rule to the bottom of 

“жайласа”, and then reload "indes. html". Now 

you can sce why we сай it a frozen layout. It doesn't 

mave when the browser is resized. 
Now the "alertes?" «div> ie 800 pace in width no matter 
how you resize De browser And, beaut all the ether «din 
are inside “йан, they wil Fit into the dad. 
spate ac well Sa, the page basally ушел te 800 pixel 


asl ides the problem of the sidebar 
d it lods pretty ee Hei a ttle 
heathy 


Thi tet 
epos, 
et hes be өмит aver] wides 
erac of al the e] spite on е rihê эбе 


But we've nat done eli weve gek a 
Ve room for improvement: 


> What's the state between liquid 
= and frozen? Jello, of course! 


The frozen layout has some benefits, but it also just plain 
looks bad when you widen the browser But we've got a fis, 
and it's a common design you'll see on the Web. This design is 
between frozen and liquid, and it has a name to match: jel 


© 
Зо ee ove Denial De etur enin 
( э the ge but center it inte ban KY actualy exert 


change the layout to a jello layout and let you play with it 
than to explain how it behaves, so let's just do it: 


Rather than having Fined lef and ight 
margins on the “alentent” <i, were 
setting the margins to “asks 


faitcontent ( 
width: 800px; 
padding-top 
padding-bottom: Spi; 
background-color: #67547; 
margin-left; auto; 
margin-right: auto; 


К куз ыды, when ve talked abort ji 3 content area a width of "e, the 
browser expanded the conbent area и meh a iE needed to With "ats mars, 
the rower Figures ot ak the covert margins are, bt aho make are the ft 
and rapt margins ave the same, 1a Chat the tentent ie coord 
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Test driving with a tank of jello = 


Add the two margin properties to your starbuzz.ess" file, and then reload 
the page. Now play with the size of the browser Petty ice, huh? 


So if we wont our content in the 
correct order, we either have ta live 
with an expanding sidebar or we have 
to use a jello layout? Ts there any 
‘other way to do this? 


With CSS, there are typically lots of ways to approach a layout, each with its 
town strengths and weaknesses, Actually, we're just about to look at another 
common technique for creating a two-column layout that keeps the content in 
the correct order, and avoids some of the problems of the liquid layouts. But as 
youl see, there are some tradeoff. 


Wih this new technique, we're not going to float elements at all. Instead, we're 
going to use a feature of CSS that allows you to precisely position elements on 
the page, I's called absolute positioning. Yon can also use absolute positioning 
for some nice effects beyond just mulicolumn layouts, and we'll lock at an 
example of that, to. 


To do allthis, we're going to step back to the original HTML and CSS we 
started with in the beginning of this chapter. You can find a fresh copy of these 
files in the "chapter! 1/ahsolute" folder. Be sure and take another look at these 
files so you remember what they originally looked like. Recall that we've got 

a bunch of «div» one for the header, one for main, one for the footer, and 
also а sidebar. Also remember that in the original HTML, the sidebar <div> is 
below the main content area, where we'd optimally like to have it. 
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How absolute positioning works 


Let's start by getting an idea of what absolute 
positioning does, and how it works, Here's a little 

SS о position the sidebar «iv» with absolute 
positioning Don't type this in just yet; right now we 
just want you to get a feel for how this works: 


Tie First thing ve do и ме the 
төбө» property te specify that the 
clement will be postined dle, 


feidebar ( "d 


position: absolute; 


top: 100px; Nes we set top ard 
What the CSS does Eight: 26h. right тербе 
Now let's look at what this CSS does. When an wv чым 

clement is absolutely positioned the first thing the 


[ЕН 


browser does is remove it completely from the flow: the edo a ма 


"The browser then places the element in the position 
indicated by the top and sight properties (you can 
use bottom and left as well) In this case, the sidebar 
is going to be 100 pixels from the top of the page, and 
200 pixels from the right side of the page. We're alsa 
sein with on the <a jast ie we did when i жыйы 


positioned 200 
oed ren De f.) ат 

ard poritioned according 

tn any tap, left, right, 

ar bottom propert 

at are ecified. 


— 


nd the sidebar 
A ба 100 
үч From the 
tap of the page 


right of the pane 

چ 
the other elemente‏ 

even know ti there, 


ard they apart БЫ 


Elements that are în the low dor even wrap their 
inline content around эһ te positioned element 
They are totally oblivious ta being on the page 
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Another example of absolute positioning 


Let's look at another example. Say we have another edt v 


With the id "annayingad". We could position it like this: 


#annoyingad ( 
position: absolute; 
top: 150px; 
left: 100px: 
width: 400px; 

1 


The ejes ad i being positioned 100 
quee from the left, and 150 pels 
From the p. [Et daa bit wider than 
the sidebar, ab 400 pixels 


Jos like with the sidebar, we've placed the “annoying 
ad" <div> at a precise position on the page. Any 
elements underneath that are in the normal flow 

fof the page don't have a clue about the absolutely 
positioned elements layered overhead, This is a litle 
different from floating an element, because elements 
that were in the flow adjusted their inline content 

to respect the boundaries of the floated element. 
But absolutely positioned elements have по effect, 
whatsoever on the other elements 


Who's on top? 

Another interesting thing about absolutly 
positioned elements is that you can layer them 
fn top of each other But if you've gota few 
absolutely positioned clemens at the same 
position in a page, how do you know the 
layering? In other words, who's an top? 


Each positioned clement has a property called 
a z-index that specifies йз placement on an 
imaginary z-axis items оп top are "closer" to 
you, and have a bigger z-index). 


“The header, main ard 


forter <å» are all 
in the 
on the pane 


pu we hive a second «dies fete 
absolutely 100 Vel From the ft 
and БО fuels From the tp 


Blow, and flat 


Vice бе among «dic 
on tap of the debar dio 


Tie sidebar and arnoyingad adios 
are layered on the pase, with the 
аммора having a greater cee. 


than the sidebar, so it's on top. 
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operty 


What it 
sel o by default? 


position property 


Д: me eau vate ee 
Зы hte pat, 
tee placed ne nornai 
— ent evra by 
уо feror dacs ми 
аа Vou can ua lan peat lo 
B an donate! b o ad y 
can say tod a rf b 
ebur tat Scag 
Meo ee Compare soe, 
Танаш айа e tn prey, 
Win bt etn] yoo ag 
— ннд a poston 
a 


Q 


А: vau ani poston any 


an only position «dios? 


xl block or nine, Just remember 
"fat when an elementis absolutely 
positioned, Is removed on ha normal 
fiw ol o page. 


О: so ean positon an line 
seen 


C Yes, you sure can. For instance, 
ite conan lo poston the <img> 

tnl. You can poston <am>s, 
spares, and so on ав wal, but sn 
common lo do so. 
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Dumb Questions 


QÉ: hre tere postion propery 
vas omar an vacant 
эшш? 


2 There are actually four stale, 
abite, fuod, and relative. Youve 
already heard about tatc and absolute 
Fired poslioning places an element in. 
а location atis rli 1o the browser 
адан (rather ben the page}, so fed 

lements never move. Youll see an 
rama of fad positioning п a few 
pages, Ralalve positioning takes ал 

iamen and loys Ion he page just 
We norma, but hen offsets васе 
displaying # on the page. Relate 
positoning в commonly usd lor more 
‘advanced posting and special 
feas 


Q: no 1 have to specify a with tor 
an anol positioned мепеп! just 
— elements? 


2 No, you dont have tø specia. 
with for absolutely postoned elements 
Buti you dont, by defaut, the Боск 
fron wil take up the entire with 
othe browser, minus any offset you 
spec rom th eto пам. This might 
be exactly what you want, cit might nt 
So sel һе value of he wich property If 
you want to change this default behavior. 
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О: nona to use pists tor 
soient 


— wayio 
pono sine tang paca, 
revise иаа posto oi 
you dat ray puro hg et 
You changa те wf yor tows: 
So er ere vaca) 
pi axte, and yat camente t 
weren e 10%, Pen your en 
Ste o ids tom De e or me 
wu vc B t iow 
тата 10400 рава t tn 
чайкай reduced o 10% 4 
Dit crop fo lad 
— 


Another common use tor percentages 
їп speciyng widths. N you dont need 
speci widths for your elements or 
margins, hen you can use percentages 
to make both your main content area 
and your sidebars fexbi in size. Youll 
‘Soe this done a lotin two and has 
crum layouts. 


Q vo have to know how io 
use zindexes to use absolute 
positioning? 


no зони wat be st 
Paaki onan yur en at 
CSS pec when page 
Siping ie we so Pea ie 
beyond e scape of 1s teok Ba er 
ara a pant ot hy acte pestering 
жо. so fs good а trow about 
xo core back uenon 
‘exon it bi 
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Using absolute positioning 


Were now gong to ereate а two-column Starbuzz page using techniques similar to 
those we used with the float version of the page: however, this time we'll use absolute 
positioning Heres what we're going todo: 


© кызд gong to make the sidebar ade, absolutely postoned 
In it, were going to poiton itin exactly the same place that we 
eae it before 


Ө Nt we're going to give the main content nother big margin so 
thatthe sdcharcan ston ор ofthe margin pace. 


Ө rosis we're going to gv this a good vesting anel see how it 
compares othe Dna version. 


Changing the Starbuzz CSS e g e 


pum 
Fes which ум tar 
хилае folder 
hag tell 


Our lt 
wh 


. all ready to go, and the sidebar «41 is right 
we want it below the important main content) All we need 
to dois make а few CSS changes and well have a sidebar that is 
absolutely positioned. Open your "starbuzz.es" Ше and ебу make 
a few changes to the sidebar: 


E Yon can work out of the “abate 
e files ч 


daidebar ( 
background: #efeSd0 url(images/background.gif) bottom right; 
font-size: 105%; 


е 
Орх 10px 10px 10px; 
i a 
280px; n 
П Yell see where the I1 Zere ques From 


wight ide of the browser 
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Now we just need to rework the main <div> 


Actually, there's not much reworking to be done. We've just adding a 
margin like we did with the float version, So, change the right margin 
of the main «aiv» to be 330 pixels, like you did lase time. 
fmain “ 
defeSdO url (images/background.gif) top lef 
1055; 
15px; 
Opx 330px 10px 10px; 


Were going to уне Ehe sidebar some sate to be роботе over by gung the main «йо à 
big margin Thi и vay the sine bebe we мей with the float The only difference ie 
De way he sidebar «dv i being placed over the margin 


АП you need to do is make that change to your margin, and then save. 
But before we take this for a test drive, let's think about how this is going 
to work with the absolutely positioned sidebar. 


Weve peiores the sidebar te be 120 piel: from 
Be op, and up ayant the viah side of the page 
Keep т wind, the sidebar har IO pireke of margin 
on the vight so the айдаушы talor will show 
ena Ghat lke before. 

The main «до i Poved 


2 
1 —— ي‎ 
e , eee F 
top of the sidebar. Als see thi height set in the CSS 
Жыз marja 

te bee e “>| 
ae e akar ıe al 

iride tmd den 
be te Be kft of De 
айшык болоте bat 
ihe Bowed бе 
ert be tel Be 
Ferien 
pesa 
Күү 
бе loved denen 


bo- elekt- margin 


The debar neede to be 
128 кы from the er 
betavse that's скру 
haw math voon the 
header taker op inl 
magne 


aver 


doemt wrap aroved the Yon might vart to irk about what happens to the 


absolutely Pee Footer Because flowed elements don't knew about 
pum 


absolute elements we t we den, et 
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Time for the absolute test drive S 


Make sure you've saved the new CSS and then reload 
unde hun. in your browser Lets check out the results 


m 
> бид 
tn ae eng анн, 
Mbe last von O 
ی‎ car ا‎ " toe nape De tye 
Poeti = 
на 
pr 
pee iem 
те 
ПРОТЕ sin an E 
Бутен 
st cl e 
“Stel atthe aco 
spate = And we've still got a 
Soon bat eae 
rats 


But we are now back to having a problem with the 
footer. When the browser gets wide enough, the 
absolutely positioned sidebar comes down over the top. 
fof the footer Unfortunately; we can't fall back on the 
сезг property this time, because flowed elements 
ignore the presence of absolutely positioned elements. 


0 tec 


When Ue browser и wide, the 
— — verbal qute of the man 


Content area is тебмей, and 
=. ae the sidebar tan tome down ouer 


—— 
. 
тшшш — 
— == 
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Okay, enough already, all 
we're trying to do is create two 
columns. why can't T just write 
some HTML or CSS that easily 
creates two columns? 


Well, actually, you сап. 


And to do that, you have to use a fly new . AE thi point al 
capability of modern browsers: the CSS tale K modern browsers 
splay, What's hat? CSS table display allows мт H 

you to display block elements in a table with 


rows and columns (youl see how in just a 
sec), and, by punting your content in а CSS 
table, you can easily create mulkicolumn 
designs with HTML and CSS. 


Мон унае "Ау didn't you 
tell as about (his before?” wel мш 
vn low and dira concn pecan 
тенеу desig tse gogo БО > 
thing CSS tbl diy 

Fu pst ne ces 


table display ha 


з advantages and 
фойеде 


layout and positioning 


How CSS table display works 


You can think of a table like а spreadsheet—a table has cabanas and тил, and at 
the intersection of each column and row we have a cll. In a spreadsheet table, you 
can puta value, like a number or some text, in cach сей, With CSS table display 
cach cell contains an HT 


WI. block element instead. 


e 
N — 


tows and ces for 


Ths be 7} a baal of cdl 


Firs vow 


In eath tli ve tan place an 
element, Ike 3 <div 


Let's say you've gota page with three images and three paragraphs, and you want to 
Jay them ош in two columns with three rows. Here's how you'd do that conceptually 
winga table: 


Thi the Fir el Y Ini leve 


ree vont and tee 
сй lora total 


= T 
A 


p — 
a) 
age 


E pw 
actonnodate 


the ell sid 


T. 
unus Lp — 
eee 
dicione 


De mages in a «йе. 
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* Given what you know about CSS table displays, sketch out how the two columns 


from the Starbuzz page, ‘main’ and ‘sidebar, would fit into a table, Check the 
answer at the end of the chapter before moving on. 


How to create the CSS and HTML for a table display 


As you can imagine, we're going to need to add some CSS to tell the browser to 
display our columns like а table, but we also need to add some HTML. Why? We 
need to add a bit of structure that represents the columns and rows of the table 
and the structure of the enclosing table as well 


Doing this is straightforward —all we need todo is create a cdi v> for the entire 
‘able and then one «42» per row. And far each column, we just need а block- 
level element that i placed within the row «а>. Let's sec how the HTML is 
going to work, and then we'll came back to the CSS we need. 
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Adding HTML structure for the table display 


Let's step through how we're going to add structure to support the CSS 
table display wing HTML: 


Ө Fst well create a dio that 
represents the entire table, 

ола nest the columns and rows ~ 

within that «di». ) 


Next, for each row in the 
table, well create another 
«div» that will contain the 
row content, For Starbuzz, 
‚ we have only one row. 


pope 


And, for each column, we just 
need a block element to act as 
that column. We already have 
two block elements we can 
use: the "main" <div» and the. 
, “sidebar” «div. 


г 


structure for Starbuzz below. 
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сме i fw go hand lw Joe 
len — — 


Fr wl way ering Bat 

lke a table in 
going o be delayed lke a 
адо tale "tal 


Then well creatz à «die f 


ove row we мей, and wel tall 


hc «бо "ales 


— 


Finally each column For which ve have existing 
dit "wan and “sidebar wil be displayed ac 
a tel in the table. Та а very simple table 
Layout because iE har oly bve cll, buk үө can 


Sek a lot nere complex thin this if you heed be 


‘icin HTML 


lt the header is ap bes 


Were nat honing 
— 
——— 
lebar” «deor 


ёйге-айн=кавїагнкадаг=Е e Ма be res <n ча 
piesa rape — A an 
Muir e aain S TS, Ter ald te меу di wth nd als 
| ру уен 
p we эше dio 
pr 


</div> á Я ds 
Hals Make ore o properly nest Er ug c 

</div> N 

z the foster is down here. Make sure you den 


rele the header and foster in the new <div>, 
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How to use CSS to create table displays 


Now that you know how to add the HTML structure to support the CSS table display let's 
Took at haw we specify the CSS foreach element to create the table display 


First, we added a «div for the table with the id “tableContainer” 
This «div» contains the rows and columns. We style the 
“tableContainer <div> like this: 


The "tableContaine” isthe 


divitablecontainer ( 4 
display: table; 
П 


мее. «дно and eee 


the erbe table се 


Ө Nt we added a dio for the row, with the id “tableRow”. We have 
only one row, with two cells, so we need just опе «div. If we had 
multiple rows, we'd need multiple «divis, We style the row <div> like this: 


Row" «фе vepres 


ble so we jo eed th 


divitablenow ( 
display: table-row; Wehr e 


trad (eg, dv ble 


) 


Ө Finally, we used our existing "noir" and "sidebar" «divos for the cells 
corresponding to each column in the row. We style these «divs like this: 


eh get displayed as table el 


fmain ! 
display: tabla-cel 
background: #efeSd0 url (images/background.git) top left; 
font-size: 105%; 
padding: 15рх; 
margin: Opx 10px 10px 10px; 


cor table, ө they . 


1 
daidebar ( 
display: table-cell; «— — — — 
background: $efeSdO url(images/background.gif) bottom right; 
font-size: 105; 
padding: 15px; 
margin: Opx 10px 10px 10px; 
) 
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the ess for two columns 


Meanwhile, back at Starbuzz. 


Tes time to add table display into Starbuzz to sce how those columns are going to look, Ta do 
"hat, we're going to roll back to the Starbuzz HTML. and CSS we created at the beginning of 

the chapter, so open “chapter! L/tabledisplay" to get esh copies of the HTML and CSS, Edit <2 
"index htm, and add the two «divos around both the "main" <4 у> and the “sideba 

the outer one called "tableContainer" and the inner one called чае Row", Next, open your 
'starbuzz es" file and let's add the following to the CSS: 


p 


tte of pages to 
зае the HTML AF 
yor eed . 


The dilay table property tells the "tableContane! 
<div that it will be laid ont Ie a table 


The border -spacing property adde lope of border spacing te the 
x table. Think of berder-apacirg like margin for velar 
‘nd because vere vein border-sating on the tells, we ne 
lenger reed the margins on the cds ee below 


#tableRow ( 

display: table-row; <— The "Gites! «йе i the fi 
+ ard en) vow o table 
main ( 


— 
display: table-cell; 

^ Both the “man” <div» and the 
background: #efeSd0 url (images/background.gif) top left; , шу. aye the ell 


imu table “nan” in Be 

5 Frat cans of the cee 

padding: 15px; ares on both f " 
AC as ad "debar ette бы бе 


тоз д, wee 
А 


font-size: 105%; We tan renove 


— 
— 
e 
were ere eee were Ape makes sore all the content: in bath table 


ped to the top of the eel (as 
eee to the middle o the bolton) 


vertical-align: ор; с ~ 
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‘This is great! Our two columns look (almost) 
perfect. Try making the browser wider, and 
then narrower. Notice that both columns 

are always equal in height and we no longer 
have the problem with a column overlapping 
the footer And we've got our content in the 
correct order far mobile users! 


There's only one tiny lite problem, whieh is 
easily fixed: notice tha the spacing between. 
the header and the columns, as well as the 

footer and the columns, is just a bit oo large. 


What's the problem with 
the spacing? 


We curently have a Lps bottom margin on the 
“header” <div>, and a 10px top margin on the 
“footer” <ai>. Before we added the table layout, 
we were specifying the margins of both the “main” 
and “sidebar” <aiv> to have a (px top margin, зо 
the total margin between them and the "header" is 
10px, and a 10рх hortor margin. Navy, remember 
that the vertical margins block elements sitting 
next to each other collapse- meaning that even 
though we had 10px of margin an the bottom of 
the columns and 10px of margin on the footer, 

this margin collapses into 10px, so the total space 
between the columns and footer is also 0px. 


When we removed the margins from the “main” 
and "sidebar" «divos, we created the 10px of 
spacing wing the border-spacing property in 
the “tableContainer” <div> instead, This adds 
10px of space between cells, as well as 10px of 
space around the edges 


But the space created by border-spacing and 
a margin does not collapse! So we ended up with 
20px of space between the header and the columns, 
as well as 20px of space between the columns and 
the footer, Fortunately; it's really easy to fix. 


Almost perfect! 
The өү 
p 
ie the etra 
space here 


and hee 


layout and positioning 


[oc cd 


Wee gek lo- of border pacing at the tap and bottom 
of the table and [Ори of margin on the header apd fester. 
The margins don't collapse with the border spain so мече 
36k 20рк of space where че want lO 
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Fix the spacing 


"To fix the spacing between the header and the columns, and the footer and the columns 
айе have to do s change the bottom margin of the header to be Opx and the top margin 
of the footer to be Opx. We currently specify all four sides of margin with the shorteut rule 
margin: 10px in the rules for both the header and the fonter, so instead, we'll expand 
that margin property to specify cach side separately so we can specify LOpx for all sides 
except the one next to the columns, Like this: 


dheader { 
background-color: #67504 


Instead of having [Ops on all ides of the 
патот арат беде, ve now have Орк on all sides 
margin: 10px 10px Opx 10px; геі the botton ede whieh has Ope 
height: 108px; 
) 
Hooter ( 
background-color: 8675047; 
color: #efeSd0; 
text-align: center: 
padding: 15px; 
— 
margin: Opx 10px 10px 10px; 


font-size: 90%; 


Й . —— ů ů ů ů 


А final test drive of 
our table display == — 


Кс ы 


Likewise ue көм have lOp of margin 
all ides of the Footer except. the tap 


With this change, our columns are now perfect 
We have 10px of spacing between all the pieces 

and the columns line up evenly, even if you 

expand or narrow the browser window. 

While display: table won't always be the 

right tool for your layout needs, in this case, i's 

the best solution to get two even columns of 

content in the Starbuzz page. ^ 


pre 


Ted ee 
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The Starbuzz CEO has decided to add а 
drinks mena column to the Starbuzz Caffee 
ige web page. He wants he new column to go 
Exencise шш andis 20 ol te wat 
the browser window. Your jb is to add the 
пен HTML to the existing page in the correct 
positon, and then finish up the CSS below to 
make sure it displays as а table cel, like the 
her tuo columns do. Check your solution at 
the end of he chapter. 


тенти Fer be mem у 


<div ide"drinks"> 
<h1>BEVERAGES</h1> 
<p>House Blend, $1.49</р> 
<p>Mocha Cafe Latte, $2.35</p> 
<p>Cappuccino, $1.89</p> 


<p>Chai Tea, $1.85«/p» Here's how the CEO ы 
<RIDELIXIRS</h1> V Starbuzz page to ek ith 
р> the new йн on the left 
We proudly serve elixirs brewed by our friends teneri the dints now 
at the Head First Lounge. 
<> 


<р>бгееп Tea Cooler, $2.99¢/p> 
<p>Raspberry Ice Concentration, $2.99«/p» 
<p>Blueberry Bliss Elixir, $2.99«/p» 
<p>Cranberry Antioxidant Blast, $2.99«/p» 
schal Chiller, $2.99«/p» 
<poBlack Brain Brew, $2.99«/p» 

</div> 


eS you төй be tot ) 


bar inks ( fle thr bank bo 


dls eds bo 
background-color: fefesdD; 

width: 20% 

padding: 15px; 

vertical-align: top; 


БАГУУ in 
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T b Questions 


Dum! 


So, 1 know мете not covering HTML tables unti 
later in the book, but is the CSS display: table similar 
to using HTML tables? 


tis similar in the sense Ihat you re rating 
‘ruc in your HTML thal you can mao othe rows 

and columns ofa able But unike HTML lable, CSS 
tsa tabi в al about gresentng he content in hat 
‘structure using а labe ke layout. HTML tates are for 
Tabular dala: data hat should be structured as a table. So, 
using CSS display aba is a way of creating а certain kind 
ıo presentation iayoul, while HTML tables are all about 
‘structuring your data. Vou lar al about HTML tables In 
Chapter 13. 


Qi wnat do doit need more than one cow in my 
tale display? 


А: you noss delay cont msi rous, hon 
Yot jnt ada mero NT cco трой au 
tt lot tbe Sat НТМ, ya see ve ae wo 
Caos ee atar yau э! Ба Berge con 
ire Toad meh oy ar 
ar inire MR. o маш! raa he 
"tace! i ad cael he m nar 
ltd sa a fim You can мер dg fy 
Sieg nr > a 
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О; vy аа we add the vertical agnmentto each 
callin he CSS with vertical align tp? 


А: wo ass teat t w each lab cel lo 
тав ssa al cunas wth bp al e 
Co ech calls sped way ten econ 
S dor Sanz pago cou ша лайда p 
— tng eid 
8 
. tl ide eia, 
sone cis hal gi be uhat ou кап, dura 
. mut id ron 


О; noes it mattar how ти сонан putin a eal? 


Д: wee Yol tay wt rae sie mat 
eine cmn hr mh rm cl no 
Cours Bal yo pape utres ur 
up lo you and — 


О; can we control ве width ofthe columns? 


А: Yes, you rave sone conr over wale 
ойлет wih he wai рори iD eec o 200 
бебиња can bat ou you ply 
rad at we sal De wih lb alin oD Vo 
Carta û at eaen cum Ме nd pot 
fea mane sure to ihe а up o OOK) By org 
v end and cota 
тра ou esa 1a bromsar wo, 
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Strategies for your CSS layout toolbox 


As you've seen, there аге а variety of methods you can use to lay out your 
Pages using HTML and CSS, And we didn't have to change the HTML much 
to change the layout of the page; other than moving a piece of content around 
(for handling the floating sidebar), and adding a couple of «divos (for the 
‘able display layout), you handle the presentation af your content entirely with 
your CSS, That's really the idea: your HTML should be ай about structuring 
your content, and the CSS is what handles the layout, Which method you 
choose for doing that layout is up to you and is ging to depend on the kind af 
layout you choose and how flexible you want it to be 


Let's review 


The Floating Layout 


We used float to lay out the lounge page and float the elixirs 
<div> to the right of the main content in the page. In this case, 
float was perfect because we wanted the main coment to low 
around the elixirs <div>, which it did just beautifully We haven't 
sed it this way yet, but float aso works great for floating 
images within a paragraph of text and having the text fow 
around the image. 

we then used £1oat to nat the sidebar «div» in the Starbuzz. 
Page, and used clear to make sure that the floating sidebar 
didn't overlap with the footer, 


"The big downside is that we have to move the entire <div> we're TNI Fiat works great foe the 
eating above the main content of the page, which isn't always - lese pone its day бе 
JJ 
the content in the page. Another potential downside is that i's Keep the cde Content 
impossible to create two equal columns of content with float, dev e ee 
soif thats your goal, you'll need another solution. ad lr pul inca. 


The Jello Layout 


Nest we created a frozen layout by wrapping a fixed-size 


aio» around all the content in the page, and then we made it elle ser yov a 
jello by allowing the margins to expand with the auto property mte centered, 
value. This makes for a great-looking layout, and lots of pages Fede area 
оп the Web use this design; for instance, you'll see a lt of blogs of content 


set up this мау This ako solved the problem of our content 
ordering The disadvantage here is that the content doesn't 
expan to fil the entire browser window (which many people 
don't find to be a disadvantage at all) 


with expandable 
e$ 


you aro here> 524 


www it-ebooks.info 


overview of layout techniques 


Strategies for your CSS layout toolbox (continued) 
Ane уш yee a ше 


Ind main onder area 
The Absolute Layout rire 
We then scd absolute positioning to gct back toa liquid 
layout, and this also allows us to keep our conten in the order we 
want, By setting the sidebar t а specific width, and positioning it 
to the right of the main content, we have а main content area that 
expands and contact with the size of the page, and a sidebar that 
top fied in size and is anchored to the ight side of he browser 
window: This ka great choice for layouts when you want one 

part of your page to be fixed in size and one part to expand and 
contract, or when you need an clement to be located at a precise 
location (we'll see how to do that short 


‘The downside for the Starbuzz page, however, is that the sidebar 
overlaps the footer again when the browser is wide. So we 
continued in our quest for two perfect columns, and moved on to. 


The Table Display Layout 


With the table display layout, we hit the jackpot of layouts for 
Saab We did have to add a couple of 741 vs to our HTML 
structure to get it to work right, but that paid off with to perfectly 
aligned columns that expand and contract beautifully with the size 
of the browser window: 


In this case, the structure we added to the page was purely in 
support of the layout; it didn't add any meaning to the page. You'll 
find that «dv» is ofien used that way (and in fact, when you get 10 
the next chapter, you'll see this is even more true today than i was 
justa few years ago). But don't go «div» crazy; you want to pick 
the best layout for your needs and add as few «di »s as necessary 
to get the layout you want. 


able display layout isn't always the right choice for layout, but for 
arbuzz, it works perfectly and even let us easily expand to add a 
third column for the Beverages menu, Nice! 


There are as many page designs on the Web as there are 
designers, but many of those designs are based on the layouts 
you've learned about here (or some variation of these). You 
now have several strategies in your layout toolbox to choose 
from, so you're in good shape to handle just about any layout 
job your boss might throw at you! 


“Whe дарау ie cacy to expand 
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Hey, the site is locking great and 

I really like the CSS table layout, but T 

noticed that the header at the top with 

‘the logo and the slogan doesn't expand with 

‘the page, I mean, it feels like the slogan 

should move to the right if I expand my 
browser window, 


Yup, we agree. 
Except for the header, the Starbuzz page expands nicely as you 
make your browser window wider. Thanks to the CSS table 
layout, the columns expand proportionally as you expand the 
window, and because the footer text is centered, the footer always 
looks like it's inthe middle of the page, whether the page is 
wide or narrow: But the header doesn't expand as nicely. The 
background color docs, but the Starbuzz slogan always seems 
stuck in the same place, while you might expect that it would be 
anchored to the right side of the window. 


The reason the header isn't expanding with the rest of the page 
is because the header is one image with both the Starbuzz logo 
and the slogan in it. And that image is exactly 800px wide. I 
your browser window is opened wider than 800px, you see a lot 
of extra space over on the right. And likewise, f your browser 
window is narrower than 800px, you'l see the image fall off the 
side of the browser window 


Can we ivit? 
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fx the header image layout 


Problems with the header 


Go ahead and play with the page a bit by opening your browser window wider than the 
header image, and then narrower than the header image. You'l see that the header bn't 
working quic йе we'd lie it о yet " 
| hd when the brauser it narrower thin DOR 
wa the browser window it mare than wide, the slogan part of the header image falls 
ve «de үө ae al is enbra quee "be ede of the browser inde! 
over hereto бетү жыды» 


1 бе page vesizer itd as үө 
widen and narrow the browser virde 


Raw 
POWER 
Mwe spit tho header mage irto wo diferent mages, one with the logo and one with he slogan, 
cana ink way youl oul he we fags i ha vH head den 0 


they are positioned correctly (that is, the logo stays on the left of the header, while the slogan is 
always anchored to the right part of the header, even if you open up your browser window)? 


MET We tan ei spit the header inta bro 78 
мах Yh mines Dey bth hone a анна 
AEE Quy ard with a matte brat vote 
Fe Pd with or оаа 

ae clo i the header) 
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Fixing the header images with float 


Tes often true that there are multiple strategies to solving a layout problem with CSS, 

and tha's certainly the case here. The way we're going to solve itis to use feat, You 

already used £1oat once, to lay out part of the Starbuzz page, before we switched to 

ming the CSS table layout. But there's no reason you can't mix and match different 
table display with float in the ame. 

Jets take a look at how we're going to do this 


че: in fart, it's very common. Бо 


© Split the header image into two images header 


We already did this for you; you'll find the images "headerLogo gif" 
and "headerSlogan gil" in the “chapter! L/starbuzz/images" folder 


© Update your HTML to use these images 7 и 


Next, you need to update your HT? 


l. o replace the existing header 
image, which is one hig 860-pixel-wide image, with the two images 
we created in Step 1. We'll о ahead and give each image an id that 
well use to select each of them in our CSS, 

<div id-"header"» 


<img id-"headerLogo 
sro="images/headerlogo.gif" alt="Starbuzz Coffee logo image"> 
<img id-"headerSlogan" 
‘sro="images/headerSlogan. gif" 
alt="Providing all the caffeine you need to power your life. 


</div> 


Ө Fix the images with CSS 


Finally you need to get the images laid out in the header сопесйу. If 
you load the page now, you'l ser both images in the header, right next 
to cach other over on the left ide of the page 


Buk now Be dogm mage i right nert to the loge 


The laje iine locks okay where i is ^ cs 


n image We need to move iÈ oer here wit 


Starbuzz 
Coffee 
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testing the header image 


“Ts CSS is so easy you could probably do tin your sleep, afer al the layout experience you've 
P hadin this hare already Ga ahead and wre me CSS ox ne images п he header You 
EXeRCi$e fron youre gong to use Hoat fl the blanks below wih he rest of he rue you need o get 
the mages то he ight place. Check your answer at 1e end othe chapter beers You goon 


oat ; 
) 
Test drive your float == 
Get your CSS updated in "tubuzz s" and lou the 
Stars page: Ou биий se he header logan mag: бекм, ad ар беч, с 
all the way oer ок de right eof the pgs ди were thane Be brewer dew se 


should be, and, better yet, it stays over on the right even if 
you open your browser really wide. Success 


How float works in the header 


Remember the steps for how to float an element lum 
earlier in the chapter 


Give the clement an identity. We gave the image we 
wanted to float the id "headerSlogan?. Check- 


Give the element a width. We did't actually have 
to do that explicitly dis time (although you could). Why? 
cease an image element has a specifie width by default: 
its the width of the image itself, CSS recognizes that the 
image has a width, so we don't have to specify it ourselves, 


Float the element. Check, we floated it The <t> is 
nested in the "header" <div>, so it floats up to the top 
right of the <div>, But remember, we set the height of 
the header to һе exactly the same as the height of our two 
images, And, as we explained before, the other inline content în the 
page will Пом around the floated element. In this case, the other 
inline content in the header isthe logo image, which happens to also 
be exactly the same height as the slogan image and the header. So 
the two images line up perfectly! 
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there are no 
Dumb € Questions 


О: watt feat an image thal 
paragraph of text? 


(— be 
. iste ‘naj test ete ate 
Steen gt ш. аши deen lange ptr lor 

Какым ийите dee ne ol Ота tom asd 
бейитин йаа tomava spand al? Sane igo a age 
faa teate rue Bh age 

ti ip actam aio oe 

кааба йе ett берии 

yy acr 


Hey guys! Starbuzz just won the 
Roaster of the Year Award. This is 
huge. Con we get it on the page front and 
center? All our customers need to see this. 

Тор priority; make it happen! 


85 


Well, we could just thrin 
this as an image into any old 
paragraph on the page, but 
the CEO really wams this 
то be noticeable on the page. 
What if we could place the 
award on the page like this? 


Not only does that look great, 
but i's exactly what the 
CEO маа, But how? Is this 
another situation for using 
float? Or are we going to 
need another strategy? 
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О; couta we have poston the 
header images using ene of he other 
lod strategies we taled about? 


Д: os ned Tol usualy nore 
thom ny dang ugs n CSS 
ober stl тун have tae o use 
sou posting Y kal hort 
жашау poson sn nage et 
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Adding the award 


Notice that the award is sitting in а position that overlaps both the header 
and the main part of the page. It would be pretty tricky to et а floated 
image into this position, Not only that, but we know the award shouldn't 
allet the flow of any other elements in the page. 


‘This sounds like а job for absolute positioning Afer all, by using absolute 
positioning you can place it anywhere you want on the page, and since it 
sin the flow it won't affect any other element on the page. Seems like an 
easy addition to make to the page without disrupting whats already there 


Leve give it a пу. Start by adding a new «4195, just below the header (the 
"EO thinks this i pretty important, so it should he up high in the order of 
content). Here's the «divo: 


ты че 
dees dee. V enis 
. кер 


alt="Roaster of the Year award"> у 


</div> 


Positioning the award 


We want the award to sit just about in the middle of the page when 
the browser's open to 800 pixels (a typical size for browser widths) and 
just overlapping the main content «div». 


So we're going to use the top and left properties to position the 
award 30 pixels from the top, and 365 pixels fom the lefi- 


“uN 


ами Weve wing an l. position 
Position: absolute; fr te mard «йе Bat 50 
top: 7 Зорю; pek fron De tap and 315 


lef 365px: gal from be left 


Add this CSS to your “starbuzz.cs" file, save, and reload the web page. 
You'll sce the award image appear like magic, right where we want it. 
Make sure you resize the browser to see how the award displays. 
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етерге no 
Dumb Questions 


О; seems ik absolute positioning i 
ый than float because hore more contol 
over where the elements go. Should pete 
absolut positoning over sting? 


— on муш 
need. I you realy need an laren lo appear 
жа precise ровно he page, беп absolute 
postoning he way to go. Ви you wat, 
зау have ln Пон around an image, you cant 
тазу do hat wi absol postining: in that 
case, youll detntely want to use oat You nd 
es lor bot ay regal 


О: was playing ийа couple of absolutely 
розйопев <i> elements, and one alas is 
displayed on top of the other. ls there a way f 
can change which one is on top? 


2 Yes, avery poslioned element has what 
Ie cled a z-index,” which ls the ordering of he 
‘ements on an imaginary as (hink of itas 

Pointing out of your screen), You use it Ike is: 


p 
We xn 
lt: зора 

› 

m 
We xe 
left: dre, 


Those rules would placa the element with e 
олор ofthe element with an "dv 


О: How do iknow what index each 
чете on the page is by default? 


A yore sy ee 

he omar ops ah daman h 
tephra te 
ira yo wot cara ind ordre 
ie oram усеш yg ba eye 
Pea chao la we d Paar 
Us uet selina e roin 
red nda civ det o tr 
Stra aya bu you hava тийре 
леи шап plv n! yg y, 
alebat nan dabara sete 
Todi niet 


2 Yes, but its a very еде number, and 
‘actly, youll never need your z-index values 
to go that high. 


О: изи about negative index values, can 
you have zinde values of, say, 17 


А: Ye you cant Tra sane nies apy at 
tre and arge a val P ihr 
бези ara he kon Tie yan ойи oer 


О; can any slamani have aide 


А: no, ony tenants mat have меп 
зоон wh CSS usn hls rib, e 
Scree Youn cee an amp fed 
reed 
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Wo need fixed positioning 


Hey, can we get a coupon on the 
site ond put it right in customers 
faces so they canit miss it? Id 
like to offer one free coffee to 
everyone who clicks on the coupon 

for a limited time, of course. 


Just the words we've been 
waiting for: “right in the 
customer's face. 


Wy? Because it's going to give us the 
‘opportunity to try a litle йун! positioning, 
"This is the last kind of positioning we're 
going to ше inthe chapter, so let's make it 
fun, What we're going to do is put a coupon 
оп the page that always stays оп the sereen, 
even if you scroll. Is this a great technique to 
ınake your users happy? Probably not, but 
work with us here... tis going to be a Ban way 
to play with fixed positioning 


500 
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How does fixed positioning work? 


Compared о absolute positioning, fixed positioning is prety 
straightforward. With fixed positioning, you specify the position of an 
clement just like you do with absolute positioning, but the position is 
ап ойи from the edge of the browser's indo rather than the ae, 
The interesting effect this has is that once you ve placed cantent with 
fixed positioning, it stays right where you put it and doesn't move, 
even if you ni the page. 


тен Friends and coworkers by 
veferring br the browser window at 

ШС be зра, Try tit works ard 
te WAC wl vd эртен} 


So, say you have a <div> with an i of “coupon”. You can position 
the <div> fixed toa spot 300 pixels from the top of the viewport, and 
100 pixels from the left side, like this 


leds the id sleeker 
forte ador ed 
& 0 Wee using fed 


и кез 


185 3 
а drt a 
ce айы ы 

J 


Position the tason 300 pixels 
From the tp, and 100 fives 

From he lef You tan йе ме 
right and bottoms just lat wih 


кте Here's whee the lement gets 


stoned within the viewport 
Once you've got an clement positioned, then comes the fun: scroll 

around...t doesn't move. Resize the winden doesn't move. 

Pickup your monitor and shake it...it doesn't move. Okay, just 

kidding on the last one. But the point is, fixed-position elements 

don't move; they are therefor good as long as the page is displayed. 


‘Now, we're sure you're already thinking of fun things to do with 
fixed positioning, but you've gota job to do. So les get that 
coupon on the Starbuzz page. 
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Putting the coupon on the page 


Now we're going to get the Free Coffee Coupon on the page 
Let's start by creating а cdi» for the coupon to go into: 


Inside we've gt an image ofthe torn, which qud 


Here's the de with an id of "taper" C Find in the "ehaptarll/ starbuzz images" folder. 


<div id="coupon"> 
<a href="freecoffee.html" title="Click here to get your free coffee"> 
<img src="images/ticket.gif" alt="Starbuzz coupon ticket"> 
</a> 


</div> N 


Jed ede wrapped the Imagem an <i> clement to Bab sers tan elek 
fn the mage to be taken toa page with а tem they en print 


бо ahead and add this 42» at the bottom of your "indes hmi" file, just 
above the footer: Because we're going to positon it, the placement in the 
HTML will only matter to browsers that don't support positioning, and the 
coupon iit important enough to have at the top. 


Now lets write the CSS to position the coupon: 


coupon Weve setting the tegen te Fined fst 350. 

teamon Laa: gased; . tee ro te i F te viewport and es pot e 

position: fixed: 1 1 Ki Я 
[с vaht wp bast be де. of the er 


top: tee аана 
i 
фора a, dmg K we may hie borders Poff vt x le ben han- 


d Prey for both o we tan tome De ale into ee 


Remember that we hae à rule in the CSS that saye lo turn off te 
deteratien, and use à border bs underline links void. Here, we've 

seriis that rule for the link în the tovon <div> and saying we 

don't want any border on the lnk jo back and lock at he orignal CSS 
iF You reed to remind yourself ofthe other rales for the links 
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Putting the coupon on the page 


Add the new coupon rules to your "starbuzz es" fe 
save, and then reload the page. You may need to make 
the browser smaller to be able to see that the coupon 
stays put even when you ral. Clicking on the coupon 
should take you to the "freccollee hti page. 


You know, this looks great, but it might just be even more 
snazzy if the coupon was offet to the eft, so it looks Ше 
its coming ош of the side of the viewport. Now, we could 
get into our photo editing software and cutoff the left 
side of the image to create that effect. Or we could just 
wer a negative offset so that the left side of the image is 
positioned to the left of the edge of the viewport. That's 
ght, yu ca d that. 


Using a negative left property value 


Specify a negative property value just like you do a positive one: 
jus put а minus sign in ont, Like this 
By specifying -90 pale 
чете telling the browser to 


#coupon ( тейин the nage 40 peel 
position: fixed; do De left of the edge of 
top: 350px7 be veert 


left: -90px; 


gd 
= 
ais caupon 


— йи бе 
waat b tte eft of ктем ___ 7 
hm nd lye part d e 

tmp tate tll Be sen 


wai be enable — —ää¾— 
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test drive and comparison 


A rather positive, 
negative test drive 


Make sure you've put in the negative left property 
value, save, and reload the 
slick? Congrats, you've just achieved your first CSS 
special elect. Watch out, George Lucas! 


( 
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bene 
pu 


cc friendly Bina to dor 
ek it FUN 


‘Doesn't that look 


‘cover . 


rot he most 


Can you believe how good this 
site locks? I meon, look at where 
it started compared to now. Okay, 
but we've still got our work cut out 
for us. Ive got big ideas. I want to 
‘start a blog, and we need to build 


Mocha Cafe Lato, aas 
СИ 
[Тн 


is WOW wrat a difference! 
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Time to put ай this knowledge about floating and absolute positioning 
to the test! Take a look at the web page below. There are four elements 
with an id. Your job is to correctly match each of these elements with 
the CSS rules on the right, and filin the correct id selector for each 
опе. Check your answers at the end of the chapter. 


FaN in he seletars to 


c 
div id= main" t 
= margin-top: 140px; 
[Ic margin-left: 20px; 
viden. 500px; 
1 
t 
Position: absolute; 
top 20px; 
left: 550px; 
width: 200px; 
1 
float: legt, 
—— i 
( 
position: absolute; 
top 20px: 


left: 20px. 
width: 500px; 
height: 100px; 


тоге questions about positioning 


there ara no 
mb ¢ Questions 


Dum! 


О; me fana coupon ie coo but 
Medie owe шег 
twee positon лай dom. 
eta cotan, say athe botom fe 
Seon colina? 


Sure. You could positon the coupon at 
the atom ol he Beverages cum using 
something cales rote postening. We 
danit cover ths kind ol postoring, but ts 
similar to absolute excep hat he element 
isloftin thew f o page (where it 
wouid normally be), and then shits by 
the amount you spel. You can shift the 
element using top, let, bottom, or rigt, just 
ke with absolutely poslioned elements- 

So, las say you wanted the coupon below 
tha inks in he Beverages column: youd 
тое th coupon so lts nested in te 

"rela? йә at he botom. and then set he 
position property to relate. Aor that Is 
Upto you to pul he coupon precisely where 
you want it you could poston 20p« below 
"ho inks wh top: 20px, and hanging of 
the lef side of the page with lft -80рх ust 
e we dwt fad 


Ө: so the tour kinds of positioning are 
stale, absolute, fed and relative? 


A; ater saca ayo 
Seb у ao pel any ратар t 
жанв ering fo na oe 
page, Ato шин an samen стену 
Sát fow ot he pape эла alons үш 
Poston n adu ponton ao 
th cates poston өтөп vs 
inb ule you sone ya) 
бой ропа laren а speci ad 
poten ate 1o Ma brouser wo, 
. aeren ae 
Tots colane earthy вано in be 
forma ow ana asi very an 
— sul 
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You can also use these positioning 
lectiques одеће: For instance. 
remember how we said the absolutely 
ровбопей elements are posiond relate 
lo he closest poslioned parent? You could 
absolutely postion a a> within another 
“<i> by positioning ha одг <div> wit 
тозе (егйп un the он) and hen 
positoning ба Inner <an> wih absolute, 
омад you to poston relatie to ho 
parent «йо. 


ETTA 
pen! 
— dn 
ee 


A: yt sanoe, pn e 
уша was sot asl et oon 
loci. Pa coupon wo арив t 

SM noro cn the page: vs roti. 

e vera ente, he vengo e а 
vati anal a page 


О: wrat it we want to animate 
elements, Ike if we wanted to show the 
Coupon sliding into the page from the 
left? в that possible with CSS? 


2 Actually s, and we're glad you 
эй. I's beyond he scope of this book 
lo get into CSS animation, but CSS3 
invodved basie animation for elements with 
the transform and ansion features, wich 
Seele for us web geeks. ts fairy itd, 
bul you can do some prety oa things with 
CSS animation. If you want more an wat 
you can do wih CSS, yo have touse 
JavaScript, and has а whol ather loi. 
Wo give you a brief nvoducton lo CSS 
ıranslorms and Hafens In Ве арек 
just to whet your appelle. 
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layout and positioning 


Сант POINTS 


Browsers place elements in a page using fow. 


"© Block elements flow from the top down, with a inebreak 
between elements. By defaut, each block element takes 
Lup the ene wih of he browser window. 


* dnine elements он inside а block element from the top 
left to the bottom right. f mare than one ine is needed, 
the browser creates a new ine, and expands the 
Containing block element vertically to contain the inline 
elements. 


== The top and bottom adjacent margins af two block 
‘elements in the normal page fow colapse to he size of 
the larger margin, or to the size of one margin й they are 
the same size. 


== Floated elements are taken out of the normal lw and 
placed to the left or right 


= Floated elements sit on top of block elements and don't 
affect their low. However, the inine content respects the 
boundaries of a floated element and flows around it 


= The dlear property is used to specify that no floated 
elements can be on the left or right (or both) of a block 
element A block element with dear set wil move down 
nil itis free of the block element on в side. 


‘= Afoatad element must have a specific width setto a 
value other than auto. 


= Aliquid layouts one in which the content ofthe page 
‘expands io ft the page when you expand the browser 
window. 


^  Affozen layouts one in which the width of the content 
is fixed, and it doesnt expand or shrink with the browser 
window. This has the advantage of providing you more 
Control over your design, but at he cost af not using the 
browser width as efficient, 


* Ajelo layout is one in which the content width is fed, 
but the margins expand and shrink with the browser 
window. A jelo layout usualy places the contentin the 
center ofthe page. This has the same advantages as 
the frozen layout, butis often more attractive. 


There are four values the position property can be set 
ic: static, absolute, fired, and relative. 


Static positioning is the default, and places an element 
in the normal flow of he page. 


Absolute postionng lets you place elements anywhere 
їп the page. By default, absolutely розйопей elements 
аге placed relative to the sides of the page. 


Ifan absolutely positioned elementis nested within 
another positioned element then its postion is relative 
tothe containing element that в positioned. 


The properes top, right bottom, and left are used 
lo postion elements for absolute, fixed, and relative 
postining. 


Absolutely positioned elements can be layered on top of 
опе another using the z-index property. A larger zindex 
value indicates itis higher in the stack (closer to you on 
the screen). 


Frxed poston elements are always positioned relative 
tothe browser window and do not move when the page 
is scrolled. Other content in the page scrolls undemeath 
безе elements. 


Relatively postioned elements are frst fowed into 
the page as normal, and then offset by the specified 
amount, leaving empty the space where they would 
normally зї. 

With relative positioning, left, right, top, and bottom refer 
tothe amount of offset from the element's positon in he 
normal fow. 


CSS table display allows you to lay out your elements in 
a table-ike layout 

To create a CSS table display, use a block element 

be the table, block elements for the rows, and block 
elements for the cells. Typicaly, hese wil be <div> 
elements. 


Table display is a good layout strategy for multicolumn 
layouts where even columns of content are needed. 


test your skills 


HTMLeross 


This has been a turbo-charged chapter, with lots to learn. Help it all sink in by doing 
this crossword. All the answers come from the chapter, 


Across 
4. Sate between liquid and frozen. 
6. Method browser uses to positon static elements on the 
page. 
7. This kind of offset was used on the coupon for a special 
effect 
10. Usualy used to identify ап element that is going to be 
positioned. 
11. When boxes are placed on top of each other, these 
collapse. 
12. When you расе мо inline elements next to each other, 
бег margins dont 
15. Absolute positioning is relative to the positoned 

Боск 
16 ine elements are fowed from he top 
17. A postioning type that keeps elements in the fow. 
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Down 
1. Special nine elements that get grouped together into 
boxes as the page is laid out 

2. Use ‘to create space between cells ina 
table display. 

3. Block elements are flowed top to 

5. Type of positioning that is relative to the viewport. 

8. Removes element from the flow, and sets itto one side. 
B. in general is a better technique for column 
layouts 

9. Another name for the browser window. 

12. Property used to fix footer overlap problems. 

13. Inline content flows around elements. 

14. Property that describes the layering behavior of 
positioned elements. 
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BE the Browser Sclulion 
the blk лы 1 “lounge hinl" file and locate 
— er de bloc бона Faw exch oe 
on to the page below. Just concentrate. 
on the block elements 


Here's you page Flow 


wath a brake 
beteen 


aet loved 


you are hes. 539 
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Move the elixirs <div> back to its orginal 
place below the main recommendations, 
then save and reload the page. Where 
does the element get floated now? 

You should see the elixirs below the 
main content and beside the music. 
recommendations and the footer. 


vessoder of the 
HTML а Peated 
arom i b ic he 


What we want to do isset a right margin on the main content section so that 
Из the same width as the sidebar. But how big isthe sidebar? Well we hope 

you aren't already rusty since the last chapter. Here's all the information you 

need to compute the width of the sidebar. And heres the solution. 


daidebar ( 
background: #efeSd0 url(images/background.gif) bottom right; 
font-size: 105%; 

padding: 15px; 

margin: Opx 10px 10px 10px; 

width: 280px; 

float: right; 


15 + 280 + O + O + 10 + 10 = 330 


padding 


“м 


The Starbuzz CEO has decided to add a drinks menu 

column to he Starbuzz Coffee web page. He wants 

igo the new column to go on the left side, and be 20% of 

ution e idth of he browser window. Your job is to ad he 
пен HTML to the existing раде in the correct position, 

and then finish up the CSS below to make sure it 
displays as a table cell, ike the other two columns do. 
Here's our solution. 


- We ade be HHL w 
c. 'LableRew" <div>, above 
<div idsttabiecontainen’> s, 


<div ide"tableRow"> . 
<div ide"drinks"> DN 
<h1>BEVERAGES</h1> 
<p>House Blend, $1.49</p> 
<p>Mocha Cafe Latte, §2.35</p> 
<p>Cappuccino, $1.89</p> as 
<p>Chai Tea, $1.85</p> 4 
<h1>ELTXIRS</h1> 
<p> 
We proudly serve elixirs brewed by our friends 
at the Head First Lounge 
</p> 
<р>бгееп Tea Cooler, $2.99</p> 
<p>Raspberry Ice Concentration, $2.99</p> 
<p>Blueberry Bliss Elixir, $2. 99</p> 
<p>Cranberry Antioxidant Blast, $2.99</p> 
<p>Chai Chiller, $2.99</p> 
<p>Black Brain Brew, $2.99</p> 
</div> 
<div ide"main"> 


morn Ehe pate (ard 
eel in the table le 


ta look with 


e 
farinks ( eet het in bin 
display: table-tell _; as the fe mice 
background-color: #efe5d0; set the dpl 
width: 208; 


te tabla 


you are here> — 891 


exercise solutio 


cere ‘in 


Time to put all this knowledge about floating and positioning to the 
‘est! Take a look at the web page below. There are four elements with 
an id. Your job was to correctly match each of those elements with the 
CSS rules on the right, and fl in the correct id selector for each one. 
Here's the solution. Did you get them all correct? 


ave navigation" 


rm 


[I2 


temple 


ж { 


margin-top: 140px; 
margin-left: 20px; 
width: 500px; 


Hravigation ( 


position: absolute; 


top 20px 
left: 550px; 
width: 200px; 


#photo n 


float: left; 


header ‹ 
position: absolute; 
top: 20px: 
left: зори; 
width: S00px; 


height: 100px; 


layout and positioning 


This CSS is so easy you could probably do itin your sleep, after all the layout experience you've 
had in this chapter already. Go ahead and write the CSS to fx the images in the header. You 
know you're going to use float: fil in the blanks below with te rest of the rule you need to get 
the images into the right place. Here's our solution. 


You told а 


se dese, 


KB HTMLeross Solution 


т ^B 
в тето 1 
F L O * R I 
шт T b x 
iu NEGATIVE 
А о R D HÛ 
T MARGINS 8 B 
P tow 
COLLAPSE Р 
* 3 c g g 
3 Е т H Li 
"t ONTAININSG S| T I 
А R 3 Р N 
т L b 
LIEFT RELATIVE 
b У х 


“Thi the first tohen ) 


Given what you know about CSS table displays, sketch out how our two 
columns from the Starbuzz page would fit into a table, Check the answer 
atthe end of the chapter before moving оп. 


n ss table, we have 


ene rau and bro Clone 


М 


porem 


r a botal of buo teli 


Sidebar 


Ste aga bal be 

a 
beet diferent 
wel and hgh эм 


mrs are even That's wh 
ve want for Stab 


т 


In ach tell we tan plate а 
po 
the ex 


а «dios the 
Starbwes page as the cel 


m Xu 


Were the first 
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+ 
Modern HTML” 


it was more refined and shinier 
‘than HTMLA 01 


So, we're sure you've heard the hype around HTMLS. and, 
given how far along you are in this book, you're probably wondering f you made the 
right purchase. Now, one thing to be clear about, up front, is that everything youve 
leamed inthis book has been HTML, and more specifically has met ће HTMLS 
standard. But there are some new aspects of HTML markup that were added with 
the HTMLS standard that we haven't covered yel, and that's what we're going to do 
inthis chapter. Most ofthese additions are evolutionary, and you're going о find you 
are quito comfortable with them given all the hard work you ve already done in this 
book. There's some revolutionary stuf too (lke video), and well talk about that in this 
chapter as well. So, lets dive in and take a look at these new additions! 
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thinking about him! structuri 


Rethinking HTML structure 


Before we learn even more markup, let's step back for a second. we've talked a 
lot about structure, but are «dis really good structure? After all, the browser 

te" isa footer, it just knows it isa 
<div>, righi? That seems rather unsatisfying, doesn't it? 


doesn't really know your <div id=" f 


Much of the new HTMLS markup is aimed at recognizing how people 
structure their pages with «4s and providing markup that is more 
specific, and hetter suited for certain kinds of structure. You see, when the 


browser (ог search engines, or sereen readers) see id" 


page, they have no idea your «div» В for navigation, И might as well say 


bledygoop". 
So, the standards bodies actually took a look at how <d: 
being used for headers, navigation, footers, articles, and so on—and they 

added new elements to represent those things. That means with HTMLS we 
сап rework our pages a bit and replace our <div>s with elements that more 


specifically identify the kind of content contained in them, 


Jeram 


en 


Think about the way you've seen «div»s used. Also, check out a few web pages 
and see how they are using <div>s. Let's say you wanted to take the most 
‘common patterns and change the <div>s into real HTML elements. Far instance, 
you could change all the <div id-"footer"» elements to just «footer» elements. 
Make a list of al the new elements you'd add to HTML. Of course, you won't 
want to add too many, just enough to cover the most common uses. Also note 
апу advantages (or disadvantages) of adding these new elements: 


html ma 


ES Re MS 
WHO DOES wHaT? 


Sure, we could just tell you about the new HTMLS elements, but wouldnt it be more fun to figure 
"hem aut? Below, youll find the new elements to the lef (these aren't all the new elements, but 
youl find the more important ones here for each element, match it with its description to the right: 


<article> 


<nav> 


<footer> 


<time> 


<aside> 


<section> 


<video> 


Can contain a date or time or both. 


Contains content meant for navigation 
Tinks in the page. 


Used to add video media te your page 


Content that gees at the bottom of the 
page, or the bottom of a section of the 
Page. 


Contains content that is supplemental to 
the page content, like a callout or sidebar. 


Content that goes at the top of the page, 
or the top of a section of the page. 


A thematic grouping of content, typically 
with a header and possibly a footer. 


Represents a self-contained composition in 
а page, like a blog post, user foram post, 
or newspaper article. 


www it-ebooksinto 


reviewing the starbuzz page 


Modern Starbuzz 


Starbuzz Coffee is à modern, hip company, so shouldn't they be using 
the latest and greatest markup in their pages? Ler's take а look at 
where they might be mising out on opportunites to use HTMLS: 


" 
ТЕ 
ld vee 
rere rere 
— ы nat 


They ue a «е ы 
id ede fr the heading Tate. 


e 


We tan definitely thine 
of that a the main 
көө area of the 
age or maybe we hal 
yan 


hotia cho wth Jaa 

a С í— 
te Е id="sidebar” for the 

орк: — = e к 


p aa 

тыа = 

— 5.06 

Reo [me | Sena, 
Exerci 


Ti vel бей lke 
secondary erte, 
an this be an ide on 
the page? 
One nate for би 
chapter, we've еей 
the ded and the 
tason to we tan fatus 


‘nd the main 
content: area it 


nade wp of a sek 
F, vell alent passen. ж бек 
articles abort — dome 

ros Sects of 

ebe 


Here's a «бе with d enl" 
for the Footer That one seems 
pretty амо sinte ve have a 


Le element 
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tis markup 


Using everything you know so far about the new HTMLS elements, see if you can 


Exercise 


rework the Starbuzz page to make use of them. Go ahead and just mark out and 
scribble on this page. 


«div id="drinks"> 


“div id="main’> 


«div id="sidebar> 


v for vow jak fe 


ed structive 
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Using everything you know so far about the new HTMLS elements, зве if you can 
gae rework the Starbuzz page to make use of them. Go ahead and just mark out and 


tion scribble on this page. 


m 


«section id-"drinks's: 


7 


lated content 
Ghats ун hak he 
Чебен: безе 


тап 


eee eee 


e 
aah is 


that's eraty чын 


the « 


RE 


footer 


Ма ve tan мє the teten J 


clement for our bete 


ыт 


Update your Starbuzz HTML 


Let go ahead and add these new elements to your Starbuz HTML, starting with the «header 
‘elements, Well come back and look at the < 
for now you can just leave the drinks and main content <aiv>s as they a 
анша "index. an” file and make the following changes: 


© Add the <header> element 


Start by replacing the < 


iion element in a bit, but 


Go ahead and open up the 


der"> with a headers element. Like this 


dios tagt and replace 
them with <header> tag 


<header> < 
<img id="headaztogo" 
sre="inages/neaderiogo.gif" alte'Starburz Coffee logo image 
<img ide"headerSlogan" 
are="inages /headerSlogan.gif” alt="Providing all the. .."> 
</header> 
ун 


Ө Adi the <footer> element 


Do the same for the <div 4а 


„ only replace it with a «rootez element 


——— 
<tooter> 
scopy; 2012, Starbuzz Coffee 
pes 


ALL trademarks and registered trademarks appearing on 
this aite are the property of their respective owners 

</tooter> 

po: 


© Change the sidebar to an <aside> 


Now lets change the “sidebar” <div> to an < 


*peanheading"> 
<img src"images/bag.gif" alt="Bean Machine bag"> 


pte о We decided to save 3 Few trees lor bits) by йыны 
tentent a Ый jest make wre you keep А the жура tentent in 


the page oed hange бе dic Lt «або ay 


you are here > 860 


test driving sections and aside 


Test driving the new ride S 


We've got a bit more to rework, but doesn't your 
HTML already feel somehow newer, cleaner, more 
modern? Go ahead and do a test drive by loading 
your page in your browse, 


> 


Uh ah loda ike 
Brings did't 
werk 1o wll 


ШШШ 


What happened? You had 
me ай talked into this 
HTMLS stuff. That page 

doesn’ look so good. 


No worries; we just got ahead of ourselves. The 
page doesn't look right because we changed the 
HTML, but we never reworked the CSS. Think 
about it like this: we had a bunch of <div>s 
with ids that the CSS was relying on and some 
ab those <aiv>s aren't there anymore. So, we 
need to rewrite the CSS to target the new 
elements instead of those old <d1v>s. Let's do 
that now. 
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Before you continue... 


Older browsers do not support 
the new elements in HTMLS 
you'll 


Mobile browsers in smartphones, lke Android and 
‘Phone, support these new elements, so f your 
primary audience target is mobile users, youre good 
to 90 

Check hitp:!caniuse.com/#search=new% 20elements 
fer updates on browser support of the elements i ms 
chapter. 


htmis 
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styling the new elements 


How to update your CSS for the new elements 


Let's update the CSS to 
the basics correct in the 


ect our new elements, Don't worry: we've already got all 
SS file. All we need ta do is change the selectors a hit 


body 1 
background-co1or: затв, 
Zent family: Georgia, “Times New Roman", Timen, sertti 
— nal 
‚== ps 
d First, remove the Ф mark from the header rales 
sa Were spog fron arie dio with ac d ef 
ЖИ ade tan ceres nared header 
margin: dope 10px Opx 10pm; 
height. aber “ 
] 
— 
header ingitenderslogen ( 


float: right; 


p 


"AL 


Here we мей bı hang 


—— . mea 
N 


table-cell, 
background: феге5ай url (images/background.gif) bottom right; 
font-size: 1057 


this From targeting an 
Jabar" bo an эде element 


15px; 
vertical-align: 
n 
— ш— Finally we ned to 
footer { seek the Footer 
‘background-color: #675247; sesent 
color: ева; 
text-align: center: 
padding’ 15px; 
margin: Opx 10px 10px 10px; 
font-size: эз; 
‚ 


=> 
Test drive 2 S aa 


Allright, that's all we need to doy le’ give it another try; and this 
time you should see the page is back to normal. In fact, it should 
Jook exactly like it did before we add the HTML markup. 
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SERAI 


html5 markup 


“POWER 


What's the point of adding the new HTMLS markup if it has no visual effect on the page? 


Fireside Chats 


e @ ‘Tonights tal Erg and HTMLA.01 mix it up 


HTMLS 


Ab, my old pal, HTMLA 0L You had a good run, 
but now Im here 


Tom just getting started. 


Sure, people are beginning to use them. Remember 
they aren't going to change the word, they just 
make explicit what web developers have heen doing 


all along, 


Tim thinking more about <div> here 


Тїш not talking about getting rid of <div>. Yeah, 
he's great for grouping content together for styling 
and stuff, but what if you want to, say, identity 
some content as an article on your page? Or break 
your page imo sections? 


нтм14.01 


А good run? Take а look at dhe Web; itisstilla sea 
of HTMLLOI 


Yeah? And how are those new clements going? I 
haven't seen many of them out there. 


How is <p> not explicit? Hello? That's a paragraph. 
Can't get more explicit than that. 


There's nothing wrong with <div>. Leave him 
alone 


You know as well as T do that everyone is confised 
abot how to use those elements, and you can do 
Doth those things with a <div>. 


you aro hes. 5855 


discussing 


HTMLS 
Yes, 


ment, the browser, search engines, 


screen readers, and your fellow web developers all 


know for sure that's ап article 


Remember, we use the right element for the job, 


right? That way we can communicate the mo 


See, that is just exactly where у 4 Take 


the «aside» element, which is for marking up 
vupplementary content on a page. Now on a 
mobile ph 

ES 


ne with limited screen space, if the 


that content pushed to the bottom so that 
"more important content first. I the content 
is in ales instead, then any number of things can 


happen depcndin in the HTML fle the 


Now the browser can know the difference between 


nc might prioritize the 


ibis ap ill the new HTML markup: 


header, footer, sections, articles, time, and s 
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HTMLA.01 


sil looks the same 


thing? Like what? Display it exactly the 


I still don't see what the big deal is. 


Great, so with HTML we know how to deal wit 


Well, T think it is about time you take that 


yours and stuff it in 


wu l ebooks info 


miS mark 


греп your pencil 
You've already replaced the "header; “footer, and sidebar? 
“dives ith the chen, «ото, and «raides elements: Now 
You nend to replace the inky" andi буза wth <section> 
{ements and so update your CS Leave athe abe ply 
мән plac for nw we жй мөн! these to kee he page ad 
sutconeety 
> Go shad and rath oct the HTH ed 
duy wand deiude: МГ Ge bnon od re at pred e 
ptem, s e cette cement 
<div deere 
ча» 
pom 
E 
pn 
pe 
aden i- tablenow --> 
чн» al- tablecontatner - 
The CSE at fr 
жеш "у 
m 
display table-cel: 
background-color: беледд: 
мам 208; 
padding 2px: 
vertical-align: top: 
‚ 
dein ( 
display — 
background: esas 
url (image background. gif) top left; 
font-size: д 
padding: 15px; Do you stilt 
ш Stil need the ids 
vertical-align: top: these sections? зо why 
so, why? 
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fix the style of the sections 


pen you 


"M Youve already replaced the header footer; and "sidebar" 
ds with the header, «ег» and «азе» elements: Now 
T 
ements and also update your Css. Leave all the table.display 
“йоз in place for now we sll need those to keep the page aid 
out corey 
Here's ош замок 

тенти 
а 


the 
<div ide" tablecontainee"> 
<div ide"tableRow"» 
section ad- arts S i 


УМ we dd vas eate 
d 
for ante and "man 


We left the ide there 
etae ve verá Б be 

able boy identify 
cach ection to style it 


The CSS updated for 


tre seth 
eê) < 
m ыба "E teld have left the CSS fr herds the pagel Lodi 
background-color: #efeSd0; Buenas vee 2 be umo wi n't 
Ne elements et beer bring 
er id ТА Met heen targeted with cv got new Ms 
padding: 15px; the ei 1 


ements in pet 
vertical-align! top; and added the tag rane in b. 
oF thei et- jast to ake il 


lear were wing <tcton here 
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ыт markup 


Hey, Тт starting а blog. Con 
we use any of these new HTML 
elements to build it? T want to make 
‘sure Im using the latest and greatest 
Stuff з going to be super popular, just 
like our coffee, 


Interesting you should ask, because many of the 
new HTMLS elements arc perfect for creating. 
ıa blog Before we get into the actual markup, 
‘though, let's think about what a blog might look 
like, making sure we keep it consistent with the 
curent Starbuze desig, To do that, we'll reate 
a new page with the same "drinks" «section» 
fon the lefi, and the same gas aeg on the right, 
and all we'll change is the content inthe middle 
10 be the blog Let's check it ош: 


bog page wil oc ike 


We've gek a nice navigation 
mene below the header. 


And the чәл content 
жө now has several blog 
pant 


The vest of the page 


47 


3 
BFB 
pae 


مجو ج وج 


you are here + — 888 


www it-ebooks.info 


playing more with htmi5 elements 


Your ob is to choose the elements you think wil work the best for the new blog. Fil in the 
blanks in the diagram below to show which elements you would choose. Note that each blog 
Ехейсе ="! have a heading and atleast one paragraph of text 


Choose your elements from the list below: 


<header> <aside> 
«footer» «section» 
<articl <div> 
«nav» <ы> 
<time> <p> 


footer» 
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tis markup 


Your job is to choose the elements you think wil work the best for the new blog. Fil in the 
blanks in the diagram below to show which elements you would choose. Note that each blog 


ges post will have a heading and at least one paragraph of text. 
lotion Choose your elements from the list below: 


«header» aside» 
«footer» section» 
article» <div> 
<nav> E 

Tieren blog page. Us ke the <time> <p> 


me Paye, чен. the iddle 
tabor mais ee? N 
we have 3 тану 

below the header. SIRES 


ps 
We used the <nav> element 2 


for the navigation mene 


We puk the blog se 
of the page in 3 es 


ped 


We pel each blog past in 
n «а бше Clement E 
because each bloy pes is a 


ишме en at Es 
Ye onl ae rier 
жа wid affecting the Eg 
Oleg af Ue od үө 
ыыр 

“footer 
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using the article element 


Building the Starbuzz blog page 


From the previous exercise, you know that we're using a <sect ton> element for the blog section (in 

the middle column) and an cacticle» element for cach blog post. Let's get started doing that, and. 
well come back to navigation in a bit. We've already created the "hlog nnl le for you by making a 
сору of the file "index htm and replacing the "main" «section» with а “blag” «section. You 
can get the complete "blog iml" from the code downloads for the book: here's part of it: 


We're ving a thoro element for the 


te dde bog ae toben ut Te we did for “nan” m 
article бедеде fle 
pue octal nedia</ht> 77 were erly shoning 
> part af eaeh bio 
= ost here 
Here at Starbuzz we're enbracing the social media craze. In fact, 
were going further than any of our competitors and we're very close 


E 
a 
Sound Like science fiction? It's not: 
prototype social network cup as 1 write 


m 
+» 
So, keep your eyes out for this amazing пем cup. And I'll be 


releasing a video teaser soon to tell you all about thia new invention, 
straight from Starbuzz Coffee 


</p> 
</article> 


article» 
<hl>starbuzz uses computer sciencec/hl> 


+» 4— Би blog pot gets its oun 
+ адо element 
</p> 
</article> 
article» 


I'm already 


sting cur final 


alles unique patron of the monthe/ht> 


b Ма within eath bes, ve we А For 
E the heading, and «p lor the paragraphs of 
</p> PE test Pretty simple! But more meaningful 
</article> than a bunch of «dios, ight? 
[section 


et the ful blog post tent from the “lag htm!” Fle you 
eee From wickedlyimart com 
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Setting up the CSS for the blog page 


You might have noticed that both the "index html” fle and the “blog hunt" file 
link to the same CSS file, "starbuzz.es". Let's take а quick look at “hloghtml" 


Here's the link ta the CSS 


ө ahead and 
те 


<head> am 
neta charsete"ute-B"> 


<title>starbuzz Coftes = Bloge/title» 
<link rel="stylesheet" type="text/css" href="starburz.css"> 
</head> 


to target our new section with an id of 
"blog" so let's do that now, We know we want the "blog" «section» to be 
styled exactly like the “main” ion» on the home page, so we can just 
reuse the same rule by adding the rule for the blog section to the existing rule 
for the main section, like this: 


Now, we haven't yet added any С 


We tan uue бе sae vale for both чеби clement by wing 
e be bes separated by 3 tonna: This a. apy al 
tienes iet Ssegtentten ee properties tx both of the selected elements 


display: table-cell: 
background: WefeSdD url(images/background.gif) top left; 
font-size 1058) 
padding 15px: 


Even though the bu elements 
verticel-align: top; thes naan seen 


D wil eni 


[I 
on are on tus different panes, the 
because both pager lnk to the ы [» 


"That's in All the other styling we need for the “blog” <sect ton> af the page is 
already in the CSS, and we're not adding any special styling for <a t1 cle>. So 
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Test drive the 


blog page 


With the creation of a new blog 

page, and those quick meals 

to the page (that is, adding the 
on» and «article» 


elements, ers save the page 
and load it in the browser, 


s yot tan set, elements lke athens, arce 
ard aside have a similar default style bo «dos 
hat in, nat muth! Bot they de add information 
about the meaning of the content in Your Page 
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‘What's the difference 
between a section and an. 


— 


article? 


Yes, it can be confusing. Well ll you right up front 
that there is no crystal-clear answer to tis in fact, there are 
many ways to use «article» and «section». But here is 

ıa general way to think about them: use «sector to group 
together related content, and use cart le ler to enclose asel- 
contained piece of content like a news article, a blog post, or a 
short report. 


1n the Starbuzz page, each column contains related content, 
so we've treated each column as a section of the page. We've 
also taken the individual blog posts and made those articles 
because they are self-contained (you could even imagine taking 
‘one and reposting it оп another site or blog). 


Your mileage may vary, but in general, stick wo grouping 
related content together with <sect’son>, and for self- 
contained content, we <article>. And if you need to group 
content together that doesn't fel as related, you always have 
<div> to ll back оп, 
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We still need to add a 


date to the blog... === 
Starbunz meets social media 

Did you notice in our blog design that we 

added a date to every blog post? Before TY ‘83/2012 

ИТМИ, dates were created in ana hoc 

vago might have just added the date 

vito rng up at llr used a <span> 

fave an ceca tha’ pec for the job he 


A two-minute guide {ө the <time> element 


Lets take a closer lok at the <time> element. It has an important 
attribute, datetime, and the elements kind of picky about the values you 
use in this attribute, so its worth going over some of the details. 


3 


ne datetime attribute to spezify a date 
and/or а time, then You tan write à 
the conbent for the element Mest 
tome date- or time-velated tent, Ше "February 18, 2012" 
oF even "yesterday" or “ron” 


The datetime att 
SE bne content of the dex 


pn 
шее beat 


об 


ا 
<time datetime="2012-02-18"‏ 
ты ie the offal terret format 7‏ 


for specifying dates vith a dy, 
marth, and year 


2012-02 g b spesif, 
or een gota fear 


2012 
Bere are sone other ырь 7 2012-02-18 09:00 Yer add en a ine in 
эттен dates and imes wing 2012-02-18 18:09. — 24er lenit 


the official format 


aspa € Ve em psy jk a Ње 
2012-02-18 08:08 fig ate 
bh ate aed ine бе 


an UTC tne " 
тс = MT 
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Adding the <time> element to your blog 


Edit your "blog hui ile, and add che following dates below each article heading: 


article 
.. social mediac/ni> ИГ Below eath heading vee 
time datetines'2012-03-127»3/1:/2012€/time» 0843 <tine> dent 
dee denis he 
“The content of the Ene denen 
b ОИНИ 
< der nes 20 12-63-1083 чүс, with the month First). You cad dio 
tine datatinen'2012-03-10%3/10/20:2e/eimes eee PU ы 
</article> 
яше mn Were wn edle arie 
энса unique patron of the nonchs/ht> gar e A 
eee e AA Kl / baun, datz ving te offal Internet 
</article> date/time format for dite. 
Test drive the blog 


"Test drive the blog again, and you should 
see the date of the blog post show up 
underneath each blog post heading, 


Now we have 
à dale below 
eath blog 
posting 
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It seems like semantically each 
article has its cun little header, with 
a heading and date, I assume we could 
even add things like a byline with the 
author's name ond location, Is that the. 
right way to be using article? 


Z It sure ta. Again, think of an ac as a selk 
Somewhere Andi you did hat you'd dete 
wle ain йек ie vith who илне 


We can take this even further, because the <h 
ient isn't meant just for your main heade 


сап use it whenever you want to group together 
items into a header. For instance, you can add the 


To see how this works, let's go back and add some 
more <header> elements to the Starbuzz articles. 


Neke that the footer tan be wed 


create header 
these elements 


you are here> 567 


www.it-ebooks.info 


adding header elements 


How to add wore «header» elements. 


Adding <he: 1s is straightforward. Within each 
‘carticle> clement, well place a <header> to contain the 


ier» ee 


e> elements 


heading and time, To do that, find the <axt 1: 
Within the blog section and add an opening and closing 


tag 1o each one. 


———— 
section ad- los- eee 


article» 
header» A 
Ml»starbusz meets social mediaé/hl* 
<time datetime="2012-03-12">3/12/2012</time> 
</header> 
</articie> 


he heading and the tine element 


article» 
<header> 
<hipstarbuzz uses computer science/h1> 
time datetime="2012-03-10">3/10/2012</time> 
</header> 


poc] 
</article> 


Mike ue Yu эй 3 cede te 
tat ae De Ма ser 
— ) 
Ре 
poo 


mre» & 


<time datetine=""2012-02-18">2/15/2012<¢/time> 
</header> 
<р>...</р> 

</article> 

[sections 


Feel free to add an author byline to the header as well. Hmm, there isn't an «author» element. 
‘Any idea how you might mark up an author byline? 
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Testing the header 5255 


Go ahead and add the «header» elements to the 
Starbuzz blog and give it a test run, 


Formatting i all off төм. 


— 


N 


Now that we've added the «header» elements, the spacing 
and formatting is off; did you notice we've got way too much 
‘space below the article heading and below the date, and the. 


background color is all wrong? Any idea why? Write your 
ideas about why this might be happening below. 


jt your CSS ad ме 
Wok take a lak at your CS 
меде» les 
if there are any other " 
at mane be affecting the new arbel 


headers yoo jot added 
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So, what's wrong with the 
header anyway? 
Cleat we've mene p ihe ormating a bk by 


adding the <header> clemens, Why? Let's take 
another look at the "starbuzz ex" le and check 


out the nile for the <header> element: 
header ( 
‘background-color: #675е47; 
margin. 10px 10px Opx 10px; 
height: 108px; 
) 
u 


er vule het property tane the 

backgroud coor i be sek and apate te be added to 
ALL headers in the page, vo 
Ard the margin isn't helping her 


We can fix this hy erating a class just for the 


<ездет> at the top of the page. We might have The ve for bing the header verks 
several cheader> elements in sections and articles for the main header brt looks 
throughout the site, and in our case, for Starbuzz erii For the headers m De abies 


Coffee, the <header> at the top of the page will 
always he treated differently from these other headers 
because it has a special graphical look. So, first find 
the top chesdez» element in your "bloghtmi" file 
and add a class named “top” to the element: 


ма the eles "tap to the firek 
<body> “header> clement in the pate 
header clase="top"> 
‘<img id="headezLogo" 
arce inages/headerLogo.gif" alt="starbuzz Coffee header logo image!» 


arcu inages/headerSlogan.gif" alte"Starbuzz Coffee header slogan image" 
</neader> 


Add the “top” class to the top <header> in your “index hmi" file, tao. 
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Once you've added the “top” class to both your "blog html" and “index hurl” 
files, then all you have to do is update your CSS to use the class in the selector 
in the rules for the header: 


8 Weve added the bop eae selector 
— te header vule in De CSS 
background-color: #675047; 
margin: 10px 10px or- 10px; 
height: лови 
, 
Беда а We added # to thi vule -le we don't need for 
Пр Amgtheadersiogan Û {e selector bo werk tore it det mate e mere Clee 
float: Fight in the CSS оу wich header чете tto ch 
a Ide best-practice werk 


) 


A final test drive for the headers 


Once you've made allie changes о your ET 
'bloghtml", "index html", and "sarhzz c 


files reload the blog page 


Notice that now the «header» rules apply 
only ta the «header» at the very top of the 
pare, which is just what we want, Meanwhile, 
the article <headex>s get the defaul style, 
which will work fine as well. 


New the headers in the = „аң 
are formatted tovc 
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there tre 20 
Dumb Questions 


О: we are doing tot work a 
elements to the page, and i looks exactly 
the same as it did betore! Tel mo again 
wha al tis is getting me? 


Å: wove replaced a leu devant and 
added a few elements, and п е process, 
‘weve added a lot ol meaning 1o our 

pages. The browser, starch engines, ала 
аррїсайоп or bulding web pages, can. i 
they want be a lol smarter about how they 
handle diferent parts of your page. And 
your page is easier or you, and other web 
developers, lo read. Even hough your page 
locks the same. its а lot more тапад 
under he covers. 


О; wats te вне between a 
second and an cach apain? Tay 


зеет similar to me. КОР? 


Its easy to gat cofusod about wich 
lement lo use, so we re glad you asked. 
‘Tha «saco element is mora generic han 
<at>, but їз not as generi as <dl>. For 
instance, I you've just adding an element зо 
you can sje lhe page, then use а «d I 
youre adding an element to mark up content 
that forms a well-defined saclon of related 
content, hen use cssc. Ard Ifyou 
have some content hat can be reused or 
distributed independentiy rom the rest of ha 
‘content on the page, hen use carico. 


О: should every racio and 
rici always havea cesta? 


А: matt ume, уш чедери 
"alor азиа атата 
майек (ша QU iba ашп. 
rari ы тон 
tom к duc en t rl 


mood a header or descriptive or introduction 
purposes Likewise, content win а «secta» 
"monis a group ot related content in your 
page, so it wil typically have ота kind 

of header i separat and introduce that 
secon ol content. 


О: shouts we use headers only when 
wae got more than one thing o putin 
їп What it we've опу got one heading 
and nothing ese? 


Д: vou can uaa чемер on уш 
„ Pava ony ore eg taint The 

had erat pre ea тае 
‘nan Pa separats ta heater ola 
page, asecin ran cem hare 
иби corr oem Ti etel 
at you den pu you heating iun 
atat earen (Pa ba pago wil 
itl dn 


A quick interview with «div» 


«div»'s feeling a bit left out... 


Head First: Hey <aiv>, we heard you've been feeling 
really down lately What's up? 


<div>: In case you haven't noticed, Pm being made 
mostly redundant! They're replacing me all over the place 


With these new elements, «ве >, <anide>, 


Head First: Hey, Element-up: after all, lad see you 
in Starbuzz handling the “tableContainer” and the 
Заме 


<div>: They haven't gotten rid of me completely yet, 
but if they keep inventing new elements, it won't be long 
before it's game over, man. 


Head First: The last time Llooked, you were stilin the 
HTML specification, Web developers have all sorts of 
special needs for adding structure to their pages and the 
standards guys (and gals) have no interest in inventing 
zillions of new elements 


<div>: That's true, and I haven't seen any new elements 
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come along that are simply for creating generic structure. 


Head First: Right! All these other new elements are 
specifically for adding semantic meaning to pages, and 
you're much more general purpose. You're what everyone 
{alls back on when they need table layout, for instance. 


<div>: That's so true! 


Head First: I you ask us, you were way overworked 
before these new elements came along. -in't it time you 
start enjoying your reduced workload? 


«div»: You know; you make а good point. Maybe 1 
should close down shop for a while and see the world; 
afier all, I racked up a lot of frequent fyer mileage flying 
around the Internet, 


Head First: Hold on now, you can't just disappear; most 
fof the Web is relying on you 


Head First: Hello? <aiv>? 
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Being a forward-thinking 
CEO, 1 feel better knowing we're 
making the page as semantically sound 
оз we cen But don't we need some. 
navigation? How do I get from the home 
‘page to the blog? And back? 


to do us much good if readers can't navigate 
between them. 


And to create navigation for these pages, we're going to use 
some of the tools we already know about; namely, a list and 
some anchor tags. Let's see how that works, 


First, create а set of links for our navigation: 


<a href index.html" >iHE</a> 
Җа hrefa"blog.htnl">a106</a> 
<a hrefe""DTiIVENTIONS</a> 

{ pr 
proc 


C leaving бене three ints blank beau we won't be adding 


these pases bat you shuld eel Free to creste these page! 


Nos wrap up those anchors in an unordered list so we can 
treat them as a group of items, We haven't done this before, 
but watch how this works, and see how Hits are perfect for. 
navigation items: 


Notice Bak eaeh ink it now an item în an 
unordered hak. Thie may nat lok math Ме 
Таубе, but iE wll when we apply some Efe 


cu» 
Aste res-, index.htm ">iiouz</a> €1 
li class="selected"><a hrefe"blog.heml">s10c</a></1i> 
"rINVENTIONSe a» 4/149 
Lica az eee 
ажа hrefe"aicckricce a» ЛУ 
E 


ce alo that we ae фен 


үз oe item at 
the selected one by wing a clas 


you are here 
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Completing the navigation 


Now place the navigation right into your HTML. Do that by 
inserting it just below the header in the “blog html” file: 
<body> 
header class="top"> 
Wing id="headerLogo” 
sro="inages/headerLogo gif” alt="Starbuzz Coffee header logo inage"> 
<img id="neaderslogan" 
sre="imagee/headerSlogan.gif" alte"Providing all the caffeine. .."> 
essere 
pu 
<li><a hrefa" index. html" >н он: </аэ</14> 
<li class="selected"><a hrefa"blog.html">s10%</a></Li> 
<li><a hrefa"">INVENTIONS</a></14> 
<li><a hrefe" "SHECIPES</a></14> 
аза hrefa"">iOCATIONS</a></11> 
<> 


</body> 


Adding the navigation CSS ake send aå Ба CSS йе 
4 BOTTOM of gr starb en 


You can try that HTML if you want, but you won't be satisfied that i feel 
anything like "navigation." So, before you try it, les add some C 


FE 


bete adding a hatkiground color, and some saris and padding 
background-color: Nefesd0; 


Notice that the boktam margin i O betae the table display 


margin: 10px 10px Орж 10px; already has a [Opa border-saciną at the op 
list-style-type: none; 
Base g mr gd SEE mper that we've removed the bullets From the ist items 


) 
maia Were we've changing бе бирә ofeach 
display intine; (€ Балон De is items won tH 
padding: Spx 10px Spx 10px; ele and afer theyll 
cements de 


ikem From “block 
a carriage return 
. 


Flaw ints one е on he P 


i тем» ы 
ul 1 a:link, ul 14 a:visited { 
color: les tber, 


We sant lock a bit beret from 
the vet ofthe Inks im Be page, те ме override the other ales for <a> 
border-bottom: none (ave th de e ССО with a ve Dat se 

font-weight: bold; Be inks and the wed stale of the Ints б 


e links inthe navigation het 


тебе for beth 


ef leak the sie) 

! & 

ul LL selected { Md Foaly, weve setting the background of the <h» cement 
‘background-color: #евьдЗе; with the elas “Чеби” э the navi 

1 to the age 


on ikem correspond 
єт 


different fron 
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wigs 
Who needs 6PS? Giving 
the navigation a test drive 


Let's give this a try Go ahead and get the 
CSS typed into the bottom of your CSS fl 
and then load it in your browser. 


Hey not bad fot a first try We've gota nice 
navigation bar that even has the page we're 
on—the blog page—highlighted. 


Bot con we take this even further? After all, 
you're in the “modern HTML” chapter and 
We haven't шей a new element from HTML5 
for the navigation yet As you've probably 
guessed, we can improve this by adding a 
sav» clement to the HTML file. Doing so 
will give everyone (browser, search engines, 
sereen readers, your fellow weh developers) 

a bit more information about what this list 
really i 


Adding a «nav» element. 


As you already know; there is a «nav» element, and using 
îk as simple as wrapping your navigation list with «nav: 
‘opening and closing tags, like this: 


Here's the <rav staring ag, and vere lens 


d the entre savigation bit within а «мо lament 


“<ul> 
. 
.... href="blog.html">5L0%¢/a></LA> 
<li><a href=" ">INVENTIONS</a></11> 
. 
<li><a hrete"rsiccATi cse [ao 4/11» 

</ul> 

</nav> 
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Before we до any more 
testing, we really need to 
talk about your CSS, 


We should really talk about best practices You see, right now your CSS assumes that 
every unordered list isa navigational menu. So, what happens when the Starbuzz CEO 
needs to add a list of new cafes he's going to open in the blog? Disaster—he'll probably 
get а navigation Бы right in the middie of his blog because it will be styled just like the 
navigation list we just added to the page 


But no worries; to fix this potential problem, we just need to be more specific about 


targeting the navigation lis items, and that’, not hard because the only navigation list 
items we want to target are the ones contained within a «nav» clement. 


BRAIN 
OWE 


Before moving on, think through haw you'd change the CSS to 
specifically target the navigation items, and no other unordered lists. 


ыт markup 


Making our CSS more specific. 


Okay; let's use the fact that we have a «nav» element in the HTML and make the 
selectors more specific. That way, we ensure that future changes to the HTML 
(ouch as adding а innocent <ul> clement to somewhere else in the page down the 
хоад), don't result in any unexpected styling: Here's how we do that.. but notice that 
we do have to make a few adjustments to the margins of the cav» clement so it 
behaves correctly. 


na 0 YL We added a new ole Fr the «мө деген, and moved the 
background-color: teresse. reper bier for webbing De wal css tdor and margin ins ба le 
margin: 10pe 10р Ope 10ps; Ше йөз in Өе cao element ев syed wth thee repertis 

D 

a find we've added à property to set the margin of the <ol>‏ اک ے 
margin: Ope dement ko O, se it Fits nly lir the car desert (oy‏ 
liat-etyle-type: none dels, sub clement hive a margin бый el tne бе al‏ 
padding: Spx Ора Sex Ops; te be shied oer a bit iE we dorset it bs O)‏ 

D 

тазы и ( 
display: inline; SSS Finally for ALL there vuler, we've added the 
padding: Spx 10px Spx 10 secar "ras" ж Front of em so the de affert 

{ e P ONLY чь ements Bak appear within a cae 


hat way, ve ean be soe Dat if the 
ваз ш 1i a:link, Bav ul 1i a:visited ( element. That way, we tan be sure Dat if the 


CED adds a <ul> be ки blag in the Future, it won 
орай. =~ aet styled lke a navigation lt! 
border-bottom: none; Notice, we added "na" 


font-weight: bold te bath vales in Bin 
, vale with b менөн 


may ul 1i.selected { 
background-color: 8cEb996; 
+ 


Ta-da! Look at that navigation! 


Get these changes into the CSS and give it a try Not 
bad, huh? And now we can rest assured that any future 
u1» elements won't be affected by the navigation С 
Remember, when possible, add the most specifie rule 
you can to style your elements. 
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getting video into the blog 


Hey, if T could get you guys to stop geeking 
out over your new HTMLS elements for a minute, Tve 
got some great news: we've just finished creating cur new 
Tweet Sip cups. Its a revolutionary new technology: take 
asip of coffee and have your status updated on Twitter. Т 
„just did a new video demonstrating it working! Con we get 
it on the blog? 


00 


Here's the баз log 


Fine Complete with al oor 


— Ц 


a= 


Ard he wants to pot a 
vie wight in the page 
jet lke ài 


A 


^ 


ON, and is Тын Sip technology is 


carth-shatheringly well he wants ө 


te эше we've ander 3 "Fri 


ме bald him you'd be good dat 
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Now неге going to have to ad 
video to the Starbuzz page. It 
doesrit seem like a big deal, but 
‘aren't we going to need a Flash 
developer? 


Jim: Well, we used to need Flash for 

‘ideo, but with H'TMLS we tow have а 

<video> element we can use. 

Frank: Wait, isn't Flash stil eer? Ds been. 

around a long time. 

Jim I could see some short-term arguments for that on the 

‘desktop, but what are you going to do on certain mobile 
devices that don't support Flash? Think of how many 
mobile users Starbuzz has; some of those customers are 
going to be in the dark if we use Flash, 


Frank: Got it, So how do we go about using an clement 

to do video? 

Jim: Think of video like the «135 element; we supply 

‘ate attribute that references the video, which is placed 
ideo» element, 


in the page at the location of the < 


z Fer media types, video сап get complicated, especially when it comes 


Frank: Encodings? 


Jim: The format used to encode the videa and the audio of a video elip. 
Frank: That's big deal? 
Jima Itis because the browser makers haven't agreed on a common standard 


Tor video encodings. But le’ come back ta ай that. For now, let's get a 
<video> element in our page and see what all we can do with й, 


Franke Sounds good; lead the way! 
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ment to the blog 


Creating the new blog entry 


Let's get started by adding а new blog entry, which in HTML-speak, should 
be a new <article> element. Go ahead and add this HTML just under the 
eect ian> element, above the other articles: 


— VÉ D Mi icin Ue Mat xin at the a 


header» 
<hipstarbusz launches. Tweet Sipé/hl» 
«tine datetimen"2012-05-03">5/3/2012</time> 
</header> 
> 
As prom: 


d, today I'm proud to announce that starbuzz 
Coffee is launching the Tweet Sip cup, a special Starbuzz 
Coffee cup ti 


t tweets each time you take a sip! Check 
out my video of our new invent 


</p> 


</article> We're sing to add 


below the paragraph in the blog 


And now, introducing the «video» element 


At fist blush, the <video> element really is similar to the <ing> element. In the 
chapter downloads, you'll find a file named “tweetsipmp4" in the video! folder 
Make sure the “video” folder is at the same level as your "blog hil" fle. Then add 


this markup to your page right below the closing </p> tag and before the closing 
</article> ag 


come back be the deta of all hse rbd жа set, 
teehee e Wi for son noite weve setting the with and height af the 
рае with qite £ yng a sre URL for the vides. 


L D 


<video controls autoplay width="512" heighte'288" sre="video/tweetsip.np4"> 


</video> 
i 


A here we have the ling bay 


Well see what conbent we tan pice in here ina bit a wel 


580 сюре? 
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Lights, camera, action. 


Get this new markup in and give it a try! Hopefully you'll see what we do 
here, ut if yuu дий, ep rali — уш ЇЇ soon hoo han te fi i 


Here's sur video embedded inthe 
page right where ve pat iE vith Ehe 


Tare sd э мы. Ф 
* — = 
pd 
T 
me" 
my hats bmt 
eee stre 
Meme nd ba wer i 


koe be chek play to ме the iden 


Ako voie there’ а set of coni 
on These are supped if you place 


ls for playing, pin, сокай vlone, and so 
ebe attribute in your dees element 


Not bad for а couple lines of markup, huh? But don't rest ino easy 
(especially if you aren't seeing video yet); we still have a Jot to learn 
about the <у1аео»> element, Let's get started, 
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video formats can cause issues 


By the bme yer 
vend ths Bese 
"m 


[no 
be move widely 
ebe atro 
al rowers Se if 
vides work 

о Map check 
Бе Web to see 

Ae latest on this 
ККА 
elcome baek for 
е on this boi 
n 
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folder. Any ideas? 


Yes, it's probably the video format. 


While the browser makers have agreed on what the 
<video> element and API look like in HTML A, not 
everyone can agree on the actual format of the video files 
themselves, For instance, if vou are on Safari, H.264 
format is favored; if you're on Chrome, WebM is favored: 
and so on. 


In the code we just wrote, we're assuming Н.2б4 аза 
format, which works in Safari, Mobile Safari, and IE9+, 
If you're using another browser, then look in your “videa” 
folder and youl see three different types of video, with 
three different file extensions: лар4, ору, and webm 
е 


talk more about what these mean in a bil) 


For Safari, you should already be using mp4 (which 
contains H264). 


For Google Chrome, use the webm format by replacing 
your scc attribute with: 


sros"video/tueetsip_webn" 


attribute with: 


If you're using Firefox or Opera, then replace your sre N 


srew'video/tweetsip.ogy" 


And if you're using TES or cartier, you're out of luck — 
чай a ser this is Chapter 12! How could you still be using 
TES or cartier? Upgrade! But if you need to know how to 

supply fallback content far your IES users, hang оп; we're 
getting to that, 
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Tm not seeing any video. Tve 
‘riple-checked the code and 
T have the video in the right 


Bic a bry 
ye 
Heb You going; vere 
жен back ta ll 
thin a bit 


How does the <video> element work? 


At this point, you've got a video up and playing on your page, but before we move 
‘on, let's step back and look at the «vidc» element and its attributes 


If present, the controle attribute cause 


player te ply controle For controling 


ГА эд and эде playback 
iove causes the video 


ыт markup 


каш ha he can 
ый жейм ra e 
Жш fen «бе arie 
рле wen bi Thy are Been 
Tira! bel nr ake Sa 
ранены 
ore de e v dos 
etd net ere ter Be 
de ton es ee of 


The autoplay at 
"d do start playback open paye load 

The width nd hesht of бе 
iden ne page 


<video controls 
autoplay — 
width="512" height="288" 
sro="video/tweatsip.mp4" (The имче latos of the ides 
poster-"images/poster.png" 
id-"video"» 
= FC WE yos n, yos ean spy an 
ied e o бом че 
the move а nt paying 


OF см, we tan 344 an id te the 
lement too in tit we wart be 
am seme styling 


A little Webville good video 
etiquette: the autoplay attribute 


While autoplay may be the best thing for sites ike YouTube 
and Vimeo (or WebvileTV, for that matter), think twice 
before selling it in your <video> element. Often, users want 
to participate in the decision of whether or not video is 
played when they load your page. 
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overview of video attributes 


Closely inspecting the video attributes. 


Let's look more closely at some of the more important 
video attributes: sre 
The are 


8 


Ee T to find the source fle. Tn dis case, the киште 
eatem ir se Р ‘tweetsip.mp4". (If you downloaded the code 
comet a = 


‘The attribute preload is typically used for 
fine-grained control over how video loads 
for optimization purposes. Most of the time, 
the browser chooses how much video to load, 
based on things like whether autoplay is set 
and the user's bandwidth, You can override 
this by senting preload to "nonc" (none 
1. of the video is downloaded ший the user 

The video player Pigs it, "metadata" (the video metadata is 
downloaded, but no video content, ог “auto” 


autoplay 


The autoplay Bolan atribute ell the 


art playing rhe video м to let the browser make the derision. 


asit has enough data. For the videos we'r 
demoing with, you'll probably scc them start 
to play almost immediately 


width, height 
The wih and height atributes set the width and height af the 
Videa display area aio m as the viewport) Г ун рей а 
рон, the poser image wil be sealed voe wi deg 
"prc The video wa be scaled but wil maintain i a pant 
Fatio с, or 169), sn here's extra oo on е sides tre 
тр and bonoa, the video wil be tern or plar baei тө 
fit he pay mion sie, Yom son ку to mute mai 
dimensions ol the video if you wane the aber the 
bowser dosn't ave ta acak in теш ine) 


poster 
"The browser wil ypicill display one Ваше of 
the video as a “pomer” image to represent the 
videa. IF you remove the aus cp Lay айтте, 
Youll see this image displayed before you dick 
Play I's up to the browser to pick which frame 
to show; olen, the browser wil just show the 
бм frame of the video. which is aften Mack IT 
you want to show а specifie image, hen its up 
to you to create an image to display; and specify 
it by wing the poster auribute. 


loop 
Another Boolean attribute, oop automatically 
restart the video after it finishes playing 
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emis 


Twas testing on different 

browsers, and the contrels look 
different on each one. At least 
with solutions like Flash, I had 
onsistent-looking controls. 


Yes, the controls in each 


The look and feel of your controls is 
dictated by those who implement the 
browsers. They do tend io look different in 
different browsers and operating systems. In. 
some cases, for instance, on а tablet, they 
have to look and behave differently because 
Че device just works dillerently (and i's 
good thing that's already taken care of for 
you). That said, we understand; across, say 
‘desktop browsers, it would be nice to have 
consistent controls, hut that isn't a formal 
part of the HTMLS spec, and in some cases, 
a method that works on one OS might clash 
with another OS's user interlace guidelines. 
So, just know that the controls may Ше; 
and if you really feel motivated, you can. 
implement custom control for your apps 


isn Head Fst 


5 Programm: 


ө here; оао i fl 
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video format overview 


What you need to know about 
video formats 


We wish everything were as neat and tidy as the 
<video> element and its attributes, but as it turns out, 
video formats are a bit of a mess on the Web. What's 

a video format? Think about it this way: a video file 
contains two pants, a video рал and an audio рап, and. 
cach part is encoded (to reduce size and to allow it to be 
played back more efficiently) sing a specific encoding 
type. That encoding, for the most рап, is what no one 
сап agree on—some browser makers are enamored with 
261 encodings, others really like УР, and yet others 
like the open source alternative, Theora. And to make 
all diis erer mare complicated, the file that holds the video 
and audio encoding which is known as a container) has 
its own format with its own name. So we're really talking 
buzzword soup here 


Em 
РА the video 


Anyway; while it might be а big, happy world if all 
browser makers agreed on a single format to use across 
the Web, well, that just doesn't seem to be in the cards 
for a number of technical, political, and philosophical 
reasons, But rather than open that debate here, we're 
just going to make sure you've reasonably educated on. 
the topic so you can make your own decisions about 
how to support your audience, 


бениген бе totus ош ей 
zie anh eee тей: Ce 
[sn 


on mileage may vary by the time 
vend th boo, as Favored 
— thinge over tine 


like Web 
and à dee and 


The HTMLS specification allows for any video format. 
Tt is the browser implementation that determines what 


formats are actually supported. 
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The video format contenders 


htmis 


The reality is, if you're going to be serving content to a wide spectrum of wers, 


you're going to have to supply more than опе format. On the other hand, i all 


you care about is, say, the Apple iPad, you may be able to get away with just one 


Today we have three main contenders es have a lok at them: 


MP4 container with 
1.264 video and AAC audio 


H.264 is licensed by the MPEG-LA 
group. 

There is more than one kind of 
H.264; each is known as a “profile.” 


MP4/H.264 is supported by Safari 


Одо container with 
Theora video and Vorbis audio 


Theora is an open source codec. 
Video encoded with Theora is 
usually contained in an Ogg file, 
with the .ogv file extension. 


Ogg/Theora is supported by 
Firefox, Chrome, and Opera. 


WebM container with 
‘VPS video and Vorbis audio 
WebM was designed by Google to 
work with VP8-encoded vidi 


 WebMIVPB is supported by Firefox, 
Chrome, and Opera. 


You'll find WebM-formatted videos 
with the webm extension. 
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support for video f 


your MISSION: 
RECONNAISSANCE 


Sires THAT 
rea Bms video, 
As THE 
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How to juggle all those formats. 


So we know its а messy world with respect to video format, but what to do? Depending 
fn your audience, you may decide to provide just one format of your video, or several. In. 
either case, you can use one «source» element (not о be confused with the szc attributi) 
per format inside a <video> element to provide а set of videos, each with its own format, 
and let the browser pick the first опе i supports. Like this: 


"— 


and adding bree а 
Don ng Bree courte» Lgs eath wth 
E conn те attribute, eath wth a version of the 
video ina different format 
autoplay |width="S12" heighte"28i 


=== eo. 


<source arce video/tweeteip.webn'» 
<source sren"video/tweetsip.ogy"> | 


<р>логгу, your browser doesn't support the video element 
</video> 


de 


mm 


— 
тем Finds a 


wer its way дек 
TN 


T 
vides ile to see iF 
an play t (hich con be a len 


Fer eath sorte, Ө 


Petes 
ala ve tan make ik easier on the 
bruce, tee he net page) 


gue POINTS 


. The container is the Ве format hats used to package up the video, audio, 
and metadata information, Common container formats include: MP4, 
WebM, Ogg, and Flash Video. 

= The codec is the software used to encode and decode a specific encoding 
of video or audio. Popular web codecs include: H.264, VPB, Theora, AAC, 
and Vorbis. 


‘The browser decides what video it can decode. Not al browser makers 
agree, за if you want to support everyone, you need multiple encodings. 
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details of video formats 


Take 7: lights, camera, action. 


Okay if you were having trouble seeing video, add the 
markup on the previous page, and even if you weren't 
having trouble add it anyway. Give the video another try 
“Try itin a few different browsers, as well 


Now the vides shad be 


ES 


How to be even wore specific with 
your video formats 


Telling the browser the location of your source files gives it a selection of 
different versions to choose from; however, the browser has to do some 
detective work before it can truly determine а file is playable, You can help 
your browser even more һу giving it more information about ihe MIME type 
and (optionally codecs of your video files: 


The dea parameter seien 
hich себи were wed fe code 
the ideo and andie bo create the 


The file You ute De art wea 
бөйдө For the ања video Land 
эде and some metadata). Y 


“The video todet 


The audio teda 


<source src) video/tweetaip.ogv" typen'video/ogg: codecs="theora, vorbis" '> 


i Е 7 
О ie Hebi be dept on be elet 
BREE een uante R prior Th ew ee ne 
re out FG con tay 1 veles around the type attrita © 
this kind of File T apecifies the Container * ние а, 


format 


Next, you'll update your <source> elements to include the type information for 
all three types of video we have. 
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Update and test drive . 


Update your «source» elements like below, and give your page a test drive: 


<video controls autoplay widthe"512" height="288" > 
<source arce vidao/tweetsip.spi" types vidao/api; codacss"avel 420018, pas- 40-26 
<source arce" vidao/tweetsip.veba" types'video/webm; codec erg, vorbis" '> 
<eource arce? vidao/tweetsip.ogv" types'video/egg; codecs="theora, vorbis" > 
‹р>зогту, your browser doesn't support the video elenente/p> 

</video> 7 


T 


The todet for nr are more ont 


M ү» dei ез bhe cadets parametere thn you ШЙ prt an nlla dee сабың or diferent 
tan өк then ә and pat ме ̃ маш мр зам ve len bind) So tte Beh 
IE Sl be a Ийе lee «бше ut mak of бе Ya eed bo bow nave deta ded hew үм veo was ede 


time, thats okay 


Мон likely, your video wil lay as before, but you'll know that behind the scenes you're 
helping the browser with the additional type and codec information. f and when you do 
your own video encoding, you'll need to know more about the various options for the type 
Parameters to use in your source clement. You can get а lot more information on type 
parameters at http: //#1ki „whatwg.org/wiki/videc_type parameters 


there аге ne 
Dumb Questions 


ethers any hope of geting шопо years as tis isal sorted out Ana, at tay, And, Sy I you are delving your videor 


container format or codec typeinthe keep in mind what your audience needs and bon a content delivery network (CON). 

пех tew years? ant this why we have make sure yovie doing what you can o many CON companias ao otlar encoding 

standards? support hem. services. So youve got a wide variety ol 
heces depending оп your needs. 


А: rp erm ng Qantas 
— wed” where data? О: can play my vit back 
sar his pi resets wih a whole host мө? 
F A hoe vatey a uo рше 
CCTV 
beer e set al nete property one you chooses realy golng lo depand standardized, although you nd ways to do 
(воша The HTMLS standards опи. on what ind с video youre capisng and it wih some fhe browsers if you search 
recognized this and decided not lo spec bos you want to use the end result Entra the Web, Some of Ne browses supply a 
фе video malin he HTMLS spctcaton. books have been write on ideo encoding, fulscreen cota {for Instance, on tabiets) 
So, whl п princie HTMLS supports (or iS so be prepared to anlar a wor of al new that give the video element ths copy 


atleast agnostic lo) all of hese formals, acronyms and technology. You can star. Also note that once you've got a way to go 

is really up to the bowser mates to decide сатра wth programs Ike Move or Adobe fulscreen, what you can do with he video, 

wat hey do and don't supper. ‘Premiere Elements, wich Include the abilly other than basic playback, may be ited 
ıo encode your video for he Wat, youre for securly reasons (ust as tis wl plugin 

Keep an aye on is topic videos geting into serous video мов wih Final video solutions today} 

пропал oyu: we surely be an Cut Pro or Adobe Premiers, these software 


Interesting one to waleh over the next ен одап include Рог own production оов. 
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falling back to flash video 


T think Flash video is still 
important, and I want to 
make sure I have a fallback 
if my users! browsers don't 
support HTMLS video, 


4 There are techniques for 
video player if your pref 
be HTM 


5 or Flash ог 


falling back to another 
creed one (whether that 
another) isn't supported. 


Below, you'll find an example of how to insert 


your Flash video as a fall 
assuming the browser dar 


a HTMLS video. Obvious 


a 


Iback for HTML video, 
sri know how to play 
ly this is an area that 


is changing fast, so lease take a Look on the 


Web (which is updated a 
book to make sure you'r 
greatest techniques. You 


lot more often than a 
e using the latest and 
also find ways to make 


HTMLS the fallback rather than Flash if you 


prefer to give Flash video 


o priori 


«video posters"video. pg" controla» 


<object>. 
</video> 


\ 


Cr ideo пра". 
(o2 video. vans, 
icm video.oqv"? 
</object> 


For Flash video, yos need an <object> 
Insert the <objett> element inside 


. lE 
the browser doen't know abort the ende 
ent, the <object> will be wed, and youl 


idee» clement below the «и> 


а 
Flash ideo paying 


ыт 


V The site is totaly new and 
T just wanted to say nice job The sit 
Improved, and now we con do video anytime we need - 
nm bout thet Тее! Sp сир мей, if you watched the 
dro, then T guess you mi were back o Th drowing 
Berk би doit wre diy ong ona new 
coffee mug with social networking, gm fiato, digital 
заара, ach checkin, end analytics buih right in 
1 going to be a winner, I promise! 


Would you belie 
started with vi 


Now thts far beyond the scope ofthis 
ck (unless you want to сау акша 

1,400-page book), so dé 

ай youve fristen 

this book, pick up 

Head First HIMES 

Programming бу 

Your aime оле 

Head First authors 

of course) and take 

this alto ho next 

pon 
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a taste of other now elements 


Element <progress> thor 
fe etie alea Yen 


Soup Nec dee regen 
d ta 

done? Use this element ج‎ 
— خان‎ 


Mie on erai for 
tate базын 
Ett гне «footer» header» baie m be unde of 
2 ла 
тн [d This element defines the 
(ы «aside» le ctim er 
open me 
‘Yow need н element. 
Түн element it for highlighting e 
is of lent Neck ed i С^ meters Pd 
d Кя 
ен lae bis dement 
[АРШ ak P B U, md hom rd ç ym together ыы 
же! „у etic 
А, сва? ساوت‎ e oa عا‎ 
казчу кы ашды, (С Fr nag tear ie 
sod tan in article л 
те e 
тийем a be dae = 


төн тее Ше a ла 
Герун 


The me ene n è tmt, 
эш a da ne ie 


der 


Неге are a bunch of elements you 
know, and a few you don’t, that 
are all new in HTMLS. 


Remember, half the fun of HTML. 
is experimenting! So make 


iles of your own and try 


some 
these out. 
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D BULLET POINTS 


HTMLS added several new elements to 
HTML 


= <secton>,<artle>, «aside», «nav. 
«header», and <footer> are ай new 
elements to help you structure your page, 
and add more meaning than if you use 
<div>, 


‘= <secton> is for grouping related content 

= carice» is for self-contained content 
ike blog posts, forum posts, and news 
aticles. 

. <aside> is for content that is not central 
to he main content of he page, such as 
callouts and sidebars. 

‘= аа is for grouping ste navigation inks. 

= <header> groups content such as 
headings, logos, and bylines that typically 
goat the top of a page or section. 

= cfoter» groups content such as 
document information, legalese, and 
copyright that typically go at the bottom of 
a page or section. 

‘= <ime> is ako a new elementin HTMLS. I 
is used to mark up times and dates. 


«div» в stil used for structure. Itis often 
used to group elements together for 
styling purposes or to create structure for 
content that doesn't ft into one of he new 
structure-related elements in HTHLS. 


Older browsers dont support new HTMLS 
elements, so be sure you know the 
browsers your primary audience wil be 
using to access your web page, and dont 
use he new elements unti you're sure 
they wil work for your audience. 


<video> is a new HTML element for 
adding video to your page. 

Adeo codec is the encoding used to 
create the video Пе. Popular codecs 
include 264, Vp, and Theora. 
Adeo container Ве contains video, 
audo, and metadata. Popular container 
formats include MP4, OGG, and WebM. 
Provide multiple video source fies to be 


sure your audience can view your video 
без in their browsers. 
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is your left brain working? 


58% 


HTMLeross 


"There are lots of new ideas and new elements in this chapter. Do the crossword 
to help make it all stick. Al the answers come from the chapter. 


34. attribute is one that doesn't have a specified 


6. The TweetSip cup measures coffee in 
T. The design of the Starbuzz page has a main content 


а. Specify a date in the attribute of the <time> 
element. 
11. we [веб bing had ha wrong style 


"ор class 
12A browser doesn know that <div сое means 


T3. Use selectors in your CSS to make sure you 
don't get unintended sting. 

14. The «section» element is used to group 
content 


508 — Chaptori2 


Down 
1 — ааа 


2 Browser makers сап! agree on video 
4 A section can have a header and a 
5. You'd probably use this element for a sidebar. 
3. Your local newspaper might use this kind of element to 
markup is news aries. 

— for specifying multiple video fles. 
КЕЛЕТ: at the top of the page, or at he 
top ofa section or aide. 
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. e AY 
=е отем 
‘Sure, we could just tell you about the new HTHLS elements, but wouldn't be more fun to figure 
‘them out? Below, youl find the new elements to the left (hese aren't all the new elements, but 
youl find the more important ones here); for each element, match it with its description to the right: 


<article> _ Can contain a date or time or beth. 


\ / Contains content meant for navigation links in 


mA xs i the page 


Used to add video media to your page. 


| 
Xheader» —— 
ci HE Content that goes atthe bottom of the page, or 


\ the bottom of a section of the page. 
A 
ее» J Ne Contains content that îs supplemental to the 


page content, like а callout or sidebar. 
И. 


\ C Content that goes at the top of the page, or the 
top of a section of the page 


. 
TE 
ББ _— A етапе grouping of content, typically 


with a header and possibly a footer. 


^ 
«section» — Á T "m 
/ > Represents a self-contained composition in 


/ а page, like a blog post, user lorum post, or 
<video> .— hewspaper article. 
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13 tables and more lists 
А * i 
+ Getting Tabular 


If it walks like a table and talks like a table... Tere comes a time 
in Me when we have to deal with the dreaded tabular data. Whether you need to 
creato а page representing your company inventory over the last year or а catalog 
‘of your vinyimation collection (don't worry, we won't tll you know you need to do 
itin HTML, but how? Wel, have we got a deal for you: order now, and in a single 
chapter well reveal the secrets that wil allow you to put your very own data right 
Inside HTML tables. But there's mora: with every order we'l throw in our exclusive 
Guido to styling HTML tables. And, if you act now, as а spacial bonus, well throw in 
ош guide to styling HTML lists. Don't hesitate; сай now! 
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something new trom tony 


Hey guys, 1 just created this 

litte table of the cities in my journal. 

‘Twas going to put it on the website, but 

Т couldn't find a good way to do it with 

headings or blockquotes or paragraphs. 
Con you help? 
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How do you make tables with HTML? 


Tony right; you really haven't seen a good way of using HTML to represent 
is table data, at least not yet. You ба know there's a way to use CSS and. 

‘adv to create а table-ike layout (with CSS table display), hut that's for layout 
presentation) purposes, and isn't related to the content itself. Here, weve got 
falar data that we want to mark up with HTML. Luckily, HTML ha 

clement to take care of marking up tabular data, Before we dive into the <table: 


yes into a table 


clement, let's first get an idea of what g 


tables and т 


М 
ciy | юе [жые | anite [юршш | Der 
" 

Nik WA | due Bi ii| юв] мз 
Mig Gig [hec] Ta a DEEA 
Hoa [ую a паз vs 
Last Chance, СО] (у ED 102 265 3/5 
Sean een N 
Ns 
Мыл [шат [жо — 3| 35 


Aa 
‘POWER 


columns, and the actual table dala? 


If they put you in charge of HTML, how would you design one or more 
elements that could be used to specify a table, including headings, rows, 


an html tablo 


Creating a table with HTML 


Before we pull ou Tony s эйе and start making changes, lets get the table 
working like we want k in a separate HTML fle. We've started the table and 
already entered the headings and che first three rows of the table into an HTML 
le called "able ban in the “chapter! 3/journa]/" folder Check it out: 


<!ростурЕ html 
pes 
<head> 
<meta charsete"utt-8"> 
<atyle type="text/css"> 


</style> save e e re e 


<title>Testing Tony's Teaveloe/title» Өс table in the brewer. Don't 
</head> very about this for now 
<body> 


<table> PE > Mese tan ay to start the table 
pus 


Heres the first vow which we stark wth a <tr> 


p єс — 


Scene — for а eden 
Ares ben <> dete table don 
peu e that Be table heading are ed ane 
Mtnrspslatione uo GT afi each sher ИМЕ there lod te they 

Each <br> <th>niner Ratinge/th> tight make up а teen în the HTML, we are 

elven . чч» Ды debes фи ое table headings noe 

le row 525 Leek baek at Tn’ Ъ see how а бе 
Sy аып» vette, mStar рі 
Roue ise e Fa | 
еа lect De ark of бе tod vam hich ie 


For the city Was vla. 
po Y 
<td>29, 686</td> „ db dement belt me edl of the 


Rais Hable sd o el males э арий c 
ue Cc 
a M bos lbs neo ton 


‘<tebitagic City, Ioefed» 
<ta>aune 25ch</td> 


ed, e 
«ts, 312 ft</td> ма here's the third 
<ta>50</ta> теч бәк, he <td> 
p eath held me 

<> table data, 
</table> — 
</body> 

</html> 
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tables and тоге lists 


What the browser creates 


Let's take a look at how the browser displays this HTML table We'll warn you now: 
this isn't going to һе the best-looking table, but it uil ook like a table. We'll worry 
bout how it looks shortly; or now, let's make sure you've got the basics dawn, 


ите! how the өмит 


doy De Cable BTML F 
PP 
Jo ke es By E 


We've gok бөек von 
амата the headings 


N. 
ale feke 


EET 
brouser display: heading 
in bold by default 


Finishing typing in the “Testing Tony's Table" HTML from the previous page (we started 


Exoncige an e him’, but you need to finish it). Typing this in, while tedious, wil help get he 
structure of the <table>, <tr>, <th>, and «d» tags in your head. When you fish, give t 


a quick test, and then add the remaining items from Tony's table. Test that too. 
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tables 


Tables dissected 


You've 
single tabl 
take a closer look at 


n four 


what role it plays in the tabl 


ments used to create a 
tables, «tr», «th», and <td>. Let's 


хасу 


i 
<table> \ 
3 F gan | Diner 

<tr> City Date | Temp | Altitude | Population | ae, | </tx> 
<tr> Walla Walla, WA June 15th 75 1,204 ft 29.686 4/5 </tr> 
<tr> Magic City, ID June 25th 74 И 3/5 </tr> 
<tr> Bountiful, UT July tth 9 4.226 4/5 </tr> 
<tr> Last Chance, CO July 23rd 102 4,780 f 3/5 </tr> 
<tr> [nas Men] 98| unn ss |-</tr> 

Consequences, 

NM 

Why AZ 5 ии] шок / 

ies table ro <td>August 9th</td> </table> 
N ۸ 
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gers, ne 
Dumb Questions 


wy lent here be column 
teen? That seems prety peram. 


Ame ese orina ceded 
i mec ie yo arn 
кушш. B aca бап sacos 
Sara ар аитат ушат nelly 
spect ad cóum apy 


О: wnat happens й have a row that 
doen't have enough elements? In other 
words, ve got fewer things than the 
number of columns in the table? 


The easiest way to deal with that isto 
just leave he content of he data cel ong 
in othar words, you wile le I you 
leave ou the dala cal, hen the abe won't 
ıine up properly, о all ho data cll have to 
be oro even if hay are empty 


О: wati iwant my table headings to 
be down the left side of the table, instead 
of across the top: сап! do that? 


А: vas, you conary can. vou ustad 
in pit your tania ead semanis neat 
ти nstama oan ве ton yr 
armen i ma rs len endo ene 
erum ий conseto a ane ao 


О: uy triana showed me a coo tek 
ware he did all his page layout ight 
Within a table. He dian teven have to use 
E 


Go straight lo CSS jal. Do ot pass 
(o: do not colle $200. 


Using atlas fr layout was commonly dene 
inthe HTML era before CSS, when, Катку, 
"hero was no better way to do complex 
layouts. However, is a poor way lo do- 


Your layouts wen Using ables for layout 
is rtorousy hard to gel right and dificult 
1o maintain. Instead. Is much betler lo 
ise CSS table display to get he benefis 
‘fa table layout witout actualy creating 
an HTML table (is is how we styled the 
Starbuzz page in Chapter 11). Tel your 
and that his technique is old school, and 
he needs to get up to speed wilh the right 
way 1o do layout: CSS with HTML. 


Isn't a table all about presentation? 
What happened to presentation versus 
structure? 


Д: кону wan aties, you are 
speria ба one aa аши 
КТЕ 
— в 


О: How do TIL tables relate to C38 
table display? 


HTML tables alow you to speci 

The siructure ol a able using markup while 
CSS table display диев you a way lo 
display Москав! elements n a века 
presentation. Think about this way, беп 
You really need to create tabular data in your 
page, use tables (and well see how to e 
"hosa in a lj; however, when you just need 
to make use ofa aloe presentation wth 
other types of content, hen you can use a 
CSS abe display layou. 


О: can we use ess table display to 
эуе HTML ables? 


Д: vat you en edt vy 
Becht yo shy сайра ыг 
hear v s aye 
wan usa ple CSS 1o уе heute 
— 
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tables and more lists 


Tables give you a way 
to specify tabular data 
in your HTML. 


Tables consist of data 
cells within rows. 


Columns are implicitly 
defined within the 


rows. 


The number of 

columns in your table 
will be the number of 
data cells you have in 


a row. 


In general, tables are 
not meant to be used 
{ог presentation: that's 


the job of CSS. 


you are here> 607 


testing you on tables 


BE the Browser 
, Que ul id te HTML 
for a table. Your job is to play like 
oure the browser displaying the 
tab 


<table><tr><th>Artist</th> 


<ehpalbune/th></te>cte> le. After you've done 
<td>Enignas/td><td>ie Roi Est Mort, exercise, look at the 
Vive Le Rosi</ta></te> <tr><td> end of the chapter to 


Buken</td> 
<td>Progression Sessions &</td> 
</tx>cte> 


rie маазы» SOS ые 
<td>Pi ctures¢/td></tr></table> table BTML 
hl Semen em 


New be Format her HTML- 


raw the table here 


Мез 
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tables and more lists 


Adding a caption 


You can improve your table right off the bat by adding a caption 


pum 
— 
СЕЕ 
e аа 3 
</caption> “The caption беды in be 
<> коне, By dell көй. revere 
p" үчүн 
— e> 
<th>tenperaturec/th> ] 


p 
<th>rapulatione/th> 
po 

bees 
Stella malla, науы» 
<ta>rune 1Sth</ed> 
ee ee, 
<ta>1, 204 ft</ta> You held Фәр pet Be caption at the 
<ta>29, coena bop af yave table in the HTML, эй ме 
<ta>i/5</td> CES be repetition it to the bottom, if 

bers 
reste city, 10</td> 
ae 25th</td> 
tay ifta 
<ta>5,512 cce td» 
<ta>50</ t> 
<ta>3/5</ta> 

<> 


lebe of 


If yor don't like the аы 
the caption ү» can ме CSS to vepoation 
i Cael sive Baba Бү n a sec) Keep 
In mind Chat older brane don't fall 


that’s where you vant È 


Eo Tre vest d the Ude 


vows ge here 


</table> 
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checking out the unstyled table 


Test drive., and start thinking about style sas 


Аай e opis your ble n 
The Caption is at the tap of 
the tile Te path ak 


better on the bolton 


Tonys Table 
ee eee тим 


The cities I visited on my Segway'n USA travels 


n City [| Dam  |Temperuture Aititude]Population|Diner Rating] 
| (Wall Wall, WA une is [05 EZE ZZ 7] ] 
| (Magic Ciy. 1D [Dune 25h |74 EEE зо С) ] 
| (вох, UT [шуда |1 [ова SEA JI ] 
| [East Chance, CO uly 2305 |102 [юр — jus ] 

[Гы or Consequences, NM August 9 |93 Jeon poss [55 ] 
| (Why. AZ August 18104 [ох jo ps | 


| 
— — 


We really weed ko add some padding ju and a splash of orange to 


to the table data tells, to mate 
them easier t» vead. 


and the border lines ave really *heay" val 
We could vie mach Чара" borders in the 
table tels although it ould be nie to have a 
dark border od the le ta 
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tables and тоге lists 


Before we start styling, let's get the table 
into Tony’s page 


Before we start adding style to Tiny's new table, we should really get the table 


into his main page. Remember that Tony s nain page already has set a fon 
fant 1y, font-size, and other styles that the table is going 1o inherit. So without 


Puting the tale ino his page, we won't really know what the tahle looks like 


Start by opening "journal hmi" in the “chapter18/journal” folder, locate the 
August 20h 


try; and make the following changes. When you've finished, 
"move on to the next page before reloading. 


<haraugust 20, 2012</n2> 
<p> 

‘<img sre="inages/seguay2. jpg" alte"Me and my Segway in New Mexico's 
«ne 


E 
</p> 


of cities Delete b 
бине we've replacing 
ik with Be table 


‘<table> 
‘<caption>the cities I visited on ay Seguay!n USA travels</eaptton> 


<thcity</th> 

prd 

<thətenperaturec/th> 

pon 

<th>ropulat lon</th> 

be Rat inge/th> 
enm 


The vex table goes bere Copying and 


he сөн may fo get he 


==, 


</table> 
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tables and style 


Now let’s style the table 


Add the new style highlighted below at the bottom of the “Journale” 
stylesheet fle. 


(font-face { 

font-family: "Emblema one"; 
sre: url (*http: //wickedlysnart..con/hthtmlces/chapter8/journal /Eablema0ne-Regular.wof! 
url (geb //wickedlysnart..con/hthtmlcas/chapterd /journal /EablenaOne-Regular. ttf” 


› 


body { 
font-family: Verdana, Geneva, Arial, sans-serif; \ 
font-size: snail: 
А Ai the tap Verein all the style thats 
LE төй Tons web page We 
ойл scott: added al ii Chapter 6 Weve 
border-bottom: thin dotted #9886 p prs aia eee 
› b ille below it 
Ly 
font-family sans-serif; 
font-size: 2208: 
н 
LY 
font-size: E 
font-weight: normal; 


‚ 
blockquote { 

font-style: italie; 
‚ 


table ( с 
margin-left: 20px; / 


margin-right: 20px; 


el style the table Were going bı add a on 
ЙЕ ad right, and a hin, black border E he Eble 


ded salve going to move that caption 
E the bolton of the table 


table data tels to bea 
math lias dotted border in gray 

g i з 

j С dvd lel add some padding to 


space bebucen the data Content and the order 


——— 


dualis: 
ene ape] 1 S Th rle stye the ot 


i font-style ta alit and adding some top padding 


Were changing the 
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tables and more lists 


Taking the styled tables for a test drive 


‘That's lot of changes at once. Make sure you save them, and you should 
validate as well Then load "journal heml" into your browser 


en ee lee 


Th ale ada te 
Кн Segway'n USA 
"Eje ne d ме 

к yes Bt ce 
ty Teen 


^s 


August 20, 2012 - 


Al Be bert are new tanien 
ond a smaller sae. We picked 
at up from the previous styler 
already in he fie 


=, Tempertue Аш, Population DU, 
Now we've got a dark border sg | Walla Wal, de | 75 алма эв ут 
жылы) en PET saan m 85 


mov Rol mes 
de Gh ad soe fang 7 


cath table cl a «зев ram 


These dotted tines ele | Ju 19, 202 
vell bury ard distracting sa ште a Shave style шун ол т ев ага any 
hough IE doesn't help Dat Chey тиш crs 

are duplvated between each pair errem. 

of table ай [3 


Remenber in browsers that don't задра the gbd. 


rater, ection wil il be aÈ the bop oF the table 
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cells and the box model 


“Table cells look like they just 

use the box model to. theyve. 

‘got padding and a border. Do they 
‘also have a margin? 


ing and a border—just like 
you've seen in the box model but they are a litt 
different when it comes to margins. 

The box model а good way to think about table ells, but they do 


ает when it comes to margins. Let's take а look at one of the cells 
in Tony's tabike: 


Here's the content 


5,312 ft vx 
1 XL 


And here's the border: 


tells border-agating 


Тә ie jak e the yp So instead of a margin, we have a border -spacing property, which 

berder apey , is defined over the enire alie In other words you ca se the 

properly veved n wr of an individual table ce rather, you set a common spacing 
around al cells 


614 
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tables and. 


— per your pencil 
à The double dotted lines are giving Tonys table a busy and distracting look, 
ıt would be much better and wouldnt detract from the table, if we could 
just have one border around each table cell. Can you think of a way to do 
that with styling given what you've just learned? Give it a try and check 
your answer in the back of the chapter 


dewmeno , 

Dumb Questions 
О: You said border spacing в defined С): wot is there any way tohave О): Te border-spacing property 
forth entre table, so can set amade, df border spacing on tha vertical dosn't seam to work in my browse. 
for an individual table coll? than have on the horizontal? That seems 
А: тун. Tali cate dont ravo marge ine pre? Wee sony oe hal 
мыраан а eue? AA Yous gr fene spay our Everson dee support een 
Borders, an Bis spaong le sel lor the ue, Border spacing Ho а But зп ke you upgraded your 
table. You can't contro те border spacing ol коме? 


border-spacing: 10px Зори 


‘That sets 10 pixels of horizontai border 
space and 30 pels of vertical bordar space. 


each table cel separately 
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dealing with table borders 


Getting those borders to collapse 


“There is another way to solve the border dilemma, besides the 
border-spacing property. You can use a CSS property called 
border-collapse to collapse the borders so that there is no border 
spacing at all, When you do this, your browser will ignore any border 
Spacing you have set оп the table. it will also combine two borders 
that are right next to each other into one border, This “cllapses” two 
borders into one. 


Here's how you can set the border-collapse property. Follow along 
and make this change in your “journals” file: 


ante { 
2 
Late eben, apa; 
.... рианты 
— bottom; 
— 
‚ S 
Saye he е and rond then check out the 
Change inthe border 


ard st swale to" 


lage 


) 


lom You just have one single border „= mine | 
эы all be table telk Ja wh r 
we wanted, and dor you agree that wean 

he table lob th cleaner now? — 
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tables and more lists 


n 


You're becoming quite the pro at HTML and С55, so we den mind giving you а 
little more to play with in these exercises How about this: we'd ike to spruce this 
table up even a little more, starting with some text alignment issues. Let's say we 
want the date, temperature, and diner rating to be center aligned. And how about 
Fight alignment on the altitude and population? How would you do that? 


Here's a hint create two classes, one for center-aligned and one for right aligned, 
Then just use the text-align property in each. Finally, add the appropriate class to 
the correct <td> elements, 


This may sound tough, but take it step by step; you already know everything you 
need to finish this one. And, of course, you can find the answer in the back of the 
chapter, but give yourself the time to solve it before you peek 


a= 
Er Oe aumento ЕЧ 
Segway'n USA 


ELT sm mu м | PN Thee ae al 
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coloring 


How about some color? 


You know Tony loves his signature color and there's no reason not 

to айй a splash of orange to his table; not only will it look great, 

ut we can actually improve the readability of the table by adding 

some color. Just like for any other element, all you need to do is 

set the background-color property on a table cell to change its 

color (notice how everything you've learned about HTML and 
ISS is starting to come together), Here's how you do that: 


Eu 
background-color: fee6600; 
П 


Add this new rule vo your “Journale” file and reload. 


Here's what you'll ес: — MM 


How abovt sowe color in the 
table rows? 


So far, the coloris looking prety nie. Let's take it to the 
next level. A common way to color tables is to give rows an. 
alternating color, which allows vou to more easily see cach 
Tow without getting confused about which column goes 
with which row. Check it out: 


Difficult to do in CSS? Nope. Here's how you can do de 
First define a new class ler call it “cellcolor"; 


eellcolor ( 
background-color: 8fcbaTa; 

+ 
and then add this class attribute to each row you'd like 
to color, So in this case, you find the 


tagy for Magie 
class-"cell 


> opening 
Last Chance, and Why, and add 
ог" to each one. 


Your tum. Add the class "clcolor to your 

CSS in joumal css, and hen in your 

ExeRci$e HTML, add class="cellcolor" to each of the 
«^ opening tags needed o make the rows 
alternating colors. Check your answers 
before moving оп. 
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tables and more lists 


* Serious o 


Want to see another, more advanced way to add color to every other row of a table? Its called the nth-child 
pseudo-class. Remember, pseudo-casses are used to style elements based on their state (like the a:hover 
pseudo-class we used in Head First Lounge, which styles a link if the user is hovering the mouse over the lnk). 
For the nthchild pseudo-class, that state is the numerical order of an element in relation to its sibling elements. 
Lets look at an example of what that means: 


ue fer paragraphe vested in a < 
ent Eath paragraph w a “ekla” of the ele 


bon be ааш 
کے‎ d. 


) 


Lets say you want to select he even paragraphs (that is, paragraphs 2 and 4) so they have a red 
background color, nd the odd paragraphs so they have a green background colar. You бо that like this: 


p:nth-ehi1d (even) “ IE 
‘background-color! red; &— fropeh 2 and f wil be re 
] 

p:nth-eht1a odd) { 

background-color: green; and por 
П 


he | and 3 vill be ges, 


As you might guess from the name f che. this pseudo-class is even more flexible 

than just selecting odd and even items nested in an element. You can also specify simple 
expressions that use the number n to give you а wide variety of options in selecting elements. 
For instance, you can also select the even and odd paragraphs like this: 


Saleke even- I ео, then 240 бе 
p:nth-ehi1d (28) (мией <P>: 


background-color: red; 


тум,» 
is the rk paragraph 
+ Li Serb sdd- , 
pinth-child(2nHi) ( tea epi 

background-color: green; 
) 


Team, 
third paragraph — 
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testing nth-child pseudo-classes 


y Serious Exercise. 


Why dant you try your hand using the nth-child pseudo.class? 
Complete ће CSS nie below using he nh-child pseudo-class. 
to color the odd rows light orange. 


Write your андада 


ч ‘ 
‘background-color: ee 
р 


— Uke his 
D ) 


/* .celleolor | i 
background-color: #foba / 
[ 1] 


уш wat yi for fret comment aut your celer 
Оша so i doesn't take о anymore. Nent, lace e pa t 
pseudo ез ме above те rdl for serang the Баспа Rove |,3,® and 7 all have a (а-ну bal 
seal al ie п> raw ва те ct» row slays darkorange). Make Bat the rule for th will overde Bede for 
sure yore using a modem browser (ED), and reload he ec р dnt ade 

раро D wark? Ga ahead and removes now тше, nd cdl" vows vo wil sy d 

esmen йе celo re belare тойга ол. 


Did we mention that Tony made 
an interesting discovery in Truth 
or Consequences, New Mexico? 


Jes fir to say Tony found something inter 


about Truth or Consequences, New Mexico; in 
fact, he found her so interesting that after going to 
Arizona, he turned around and came right back, 


We're glad for Tony but he's really given us a 
conundrum with the table. While we сош just add 
a new row for Truth or Consequences, we'd really 
Tike to do й in a more elegant way: What are we 
talking about? Look on the next page to find out 
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Another look at Tony’s table 


Based on his return trip to New Mexico, Tony's added a new entry for August 27h, 
just below the original Truth or Consequences entry: He's also reused a couple of 
cells where the information didn't change (a great technique for reducing the amount 
of information in а table) You can sce that when he added the new row all he 
needed todo was list the things that were different the second time around (the date, 
the temperature, and that he revisited the diner). 


tables and more lists 


City Date 

Walla Walla, WA | June 15 

vere ave beth Ib June 25h 
of Tonys si Ванны, UT | уун] эг Ws 
e Toth or Lat Chance, СО] му зза 102| 12008. s 
„>“ August ih] 93| ARID 75 

— E 
August Ih] 98 v5 
9 

FDP 


— — 


But where does this leave you with HTML? It seems like you'd have to add an entire 
new row and just duplicate the city; altitude, and population, right? Well, not so fast. 
We have the technalogy...using HTML tables, you can have cells span more than 
опе row (or more than one column). Let's see how this works. 


These table data cel 
pin TWO төм 


621 


using table span 


How to tell cells to span more than one row 


What docs it mean for a cell ta span more than one row? Lets look at the entries 
for Truth or Consequences, NM, in Tony's table again. The data cells for city 
alude, and population span дө mier, not one, while the date, temp, and diner 
rating span опе row, which is the normal, default behavior for data cel 


goa | Diner 
сиу Date | temp | Attitude | Population | piner 
Walla Wala, WA | june to] 5| ЕТУ — mus ws 
Mati D le | 3m E] 3/5 
Tow UT yin 91 илз — 
Last Chance, CO| July 23a] 102 =x vs 
шй ог N August Mth ay ЕУ 75 
{ный — 
— x 
NM | - =! | 
IZE BE V ws 
— — og ч | 
WeAZ Needs] | 7 ion Т] s \ 
bs 74 Ju 
= While the date, temp, LA 
These tell span bes vov and diner rating tels СО 


take up jut one 


So, how do you do that in HIT ML? Hrs easier than you might think: you use the 


рап attribute to specify how many rows a table data cell should take up, and 
then remove the corresponding table data elements f 
spans over. Have a look its са 


ип the other rows that the cell 


ier to see than describe 


и 


sre are the tro table 
vows Dat have Be New 


Merite data 


«td rowspane"2'»rruth or Consequences, NMc/td»- 
<td classe"center'»August 9th</td> 

<td clase="center">93¢/ta> 

<td rowspans"2" classs'right'»4 242 £t</ta> 
<td rowspans"2" classe'right'»7,289«/td» 

<td class=" center">5/S</ta> 


— 


«pem ~The tity iw 
8 pigg ч Жы indicating 
J €^ eee, the table dila pans buo row 
<td class="center">Auguat 27th</td> 
Std clase="center">98¢/td> FW Then in the setend vos че 
} petty jast the cle we need 
3 de and (Sate, enp, and a rew rating) 
<td class="centar">4/S</td> 
«pe 


<td 
<ta 
аа 
<ta 
аа 
аа 
«em 


<ta 
<ta 


<a 
«nem 


* +. 
wwe No 98 


Just to make sure you've got his down, il in each cell in he 
table with the data from the correct <td> table cell. We've 
‘done one for you to get you started. Check your answers 
before moving on. 


"»Truth or Consequences, ie) ta- 
'center'»August 9th</td> 
'center">93</td> 

" elasse"right'»d,242 ft</td> 

. classe"right">7,289</td> 
'center">5/5</td> 


icenter'»August 27th</td> 
'center">98</td> __ 


center">4/5</td> 


tables and 
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testing table spans 


Test drive the table ee o 


Make the changes to the table in “journal, 
html" and give it a test run. Take a look at Sepa DM. 

the tale, Think about exactly what you're Seg ry e oa wea ott 
doing to the table: you're using HTML to August 20, 2012 

specify that certain cells should take up 

‘more than one row, and to do that, you're 
removing the <taos they're displacing 


Now we've got a great-looking 
table that doct have any 
redundant information în iÈ 
ard looks ood tool 


there аге no 


Dumb Questions 


О: You said you can ave table data) can have acolspanand rowspan ©) Do you realy think these rowspans 


apan coha 100? ioak boner? 
T A "NEP 
... адс po aher cen ha aa acuta iran he ab whch aly 
. row acd olum sane In good Ping Ae, yn eck ata lw tabe 
Wen you spa cium. Tom ано herve Jo naod omanova ta Gu Bee e rea ofê Jou nat 
айты ити iare ^ comemondigrunterd! Чито. торат сіта qula con, 
since you are spanning columns, not rows). — same row, and from the column. $o i's great to be able to do them in HTML. 


But if you ld ho table beter before, fel 
free to change your HTML and go back lo 
the previous version. 
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tables and. 


Four out of five stars? 

T know my diners, and that 

was a solid five-star rating! 

Yeu better change that in 
the table, 


Trouble in paradise? 


Te looks like we've got a disagreement on the diner rating for August 

27ih, and while we could ask Tony and Tess to come to a consensus, why 
should we? We've got tables, and we should be able to get another rating 
in there. But how? We don't really want to add yet another entry just for 


Tew's review. Наши, why don't we do i Ше this? 

City Date | Temp | Altitude | Population 
Walla Walla, WA | June 15th] 75| 85 EXT 
Magic Сау | Ju 2ih] 74] 5308 E] 
Бойы, UT муа | — 9i a3 
Last Chance, СО] July 23rd] 102 E 
Truth or August th | e 
ix Гете 98 
Wis AZ Augus 1 Tor] шоп 
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adding a nested tabi 


Hold on.that looks like a 
table within a table. 


That's because it is. But nested tables in 
HTML are straightforward. All you need 
to do is put another <table> element 
inside a <td>, How do you do that? You 
«теме a simple table to represent both 
Tony's and Tew's ratings together, and 
when you have that working, put it inside 
the table cell that now holds Tony's 4/5 
rating Lets give it a try 


‘<td rowspane 2'»Truth or Consequences, NMe/td»- 
center"»August 9th</ta> 

conter">93</ta> 

. ftc/td» 

<td rowspane 2" classe'right'»7,289«/td» 

<td classe center"»S/Sc/td» 


center"»August 27th</td> 
conter">98</ta> 
— 
Ў First, delete the old aeg 
that represented Torys rating 


<th>Tess</th> 
<ta>5/5</ta> 
epe 
pu gite The table holds 
<th>tony</th> ard one for 
<ta>4/5</ta> dings for the 
ee Der wating 
</table> 
E 
«em 


Test driving the nested table 


Go ahead and type in the new table, Tables are easy to mistype, 
so make sure you validate and then reload your page. You 
should see the new, nested table. 


n eee ere rane 


‘August 20, 2012 


The оне 1 vished on my Seay USA travets 
July 34, 2012 


tables and more lists 


Wow, looking nite 
dy that backyrond 
realy ia bit math 
For nested table 
Lats keep the nines 
bald, but take of 
the backround elo. 


you are here » 627 


www.it-ebooks.info 


testing what you know about tabi 


a 
5 BARBELL 
It ime ofall back on all that rang you've done. What you need to dois 
change the ible heating background color for us Tony and Tes, and do 


it without changing the background of the main table headings. How? You 
need to find a selector that selects only the nested table headings. 


Wala Wala, WA E 


[o EJ 


тек» stad o0 тү Span USA raves 


We want to change the ba 
the nested table headers bo white 


{ 
rc? background-color: white; 
Determine the } 
praem 
orm 


table ades 

denn 
Stop! Don't look — | 
at the next page 
until you do this 
exercise. 
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Overriding the CSS for the nested 
table headings 


You can target just the < nts in the nested table using 
a descendant selector Add а new rule to your CSS that uses 
the “table table th” selector to change the background color of 
the nested table headers to white: 


table table th ( 
Background-color: white; 
П 


Now save the changes to your "journal es" fle and reload. 


Pe 
Seqway'n USA 


рер 


Now the <th> in the But nolite oil har the bold 
rested table hasa fork weight зма wedi 
ae background. override Bab property 
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tables and more lists 


there are no 


Dumb Questions 


and assigned each table heading to it. Then 
I created a rule like this 


nestedtable { 
‘background-color: white; 
) 


Is thatan okay solution too? 


Д: mar ara ts tot nay oso 
liens ung CS, nd nay You 
{Sion safc ana preci vai way 
Tan CSS We x goto talay eg 
tesco ect tat v the 
опаа any charges ta owr TM, Wat 
Tony and Toss keep adang rious dna 
Tren tor wr reven, yt tm orla 
КЕЛҮҮ 
{otto he sing Tapa айаш, 


сещам _ __ 
Sen 


You want Tony and Tess to 
have different background. 
colors on their table rows; 
зау, blue and pink. Сап 
you think of several ways 
to do that? 
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adding а list to tony's blog 


Giving Tony’s site the final polish 


Tony's page is really looking nice, but there's ane more arca we haven't spent 
апу time styling yet: the list that contains the set of items he was preparing for 
his trip. You'l find this list in his Jane 2nd entry; check it ош below: 


Wee leaking at jost the HTML 
snippet From the Doe Dad entry 


eie 2, 2012</h2> 


E 
<img src="inages/seguay1. jpg" 
alte"mhe first day of the trip" /> 
</> 
Here's the bottom of Ton’ journal, 
E rend htl”. Кемеде, К packing 
My first day of the trip! 1 can't T in hie irk gura entry? 
believe т finally got everything 
Packed апа ready to go, Because 
May, I Wasn't able 
bring a whale lot with me: 


EM 
Ашель» ТУ 
pre — NE 


аз>аїзїга1 camerae/li» 
<li>a protein bare/1> 
<> 
E 
Would have said, «ФА journey of 
a thousand miles begins w. 
one зедмау.</ф 
</p> 
</body> 
ре 


June 2, 2012 


му rst day c the tpt Lean believe fray got everthing 


Rod ive fo erae n DER adt 
es ak he aks evo Er- 


UF 


S bound ies begins wih one Segway” 
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Giving the list some style 


tables and more lists 


You already know that once you know the basie CSS font, text, color, and other 
properties, you can style just about anything, including Нн. You've already seen a little 
Jis styling (Chapter 12), and it turns ош there are only a couple properties that are 
specifie to lists, о there's not too much more to earn. The main list property is called 
list-style-type, and it allows you to contral the bullets (or marten, as they are 


called) used in your lists, Here are a few ways you can do that 


Here чё setting the style on the Фә cement Yo tana sei 
C tn bz > element, d i wil be етей by the dio elements 


E 
list-style-type: 


Dise is the default 
dise; marker type 


— 


na 
list-style-type: circle; 
) 


‘The ende property value gives 
Yer a single ttle marker 


П 


ut 
list-style-type: square; 
D 
Md ope Ses үзә 
жен سے‎ 
ut Tonys tat ot feda 
list-style-type: mone; mm zm 
П бот camera 
A salot of nent Sora ber 
removes the maker 
К — is 
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creating a custom list marker 


What if you want a custom marker? 


Do you really think Tony would want anything less than his 
own custom marker? Well, luckily CSS has a property called 
liststyle-inage that lets you set an image to be the 
marker for a list, Lets give it a гу on Tony's list 


Here's bhe Па есед үтәр 


ybi Pad 
Tu sae gata 


an of this backpack. 


list-atyle-image: url inages/backpack gif) + m 
padding-top: Spx; Seems fos doen't? Md 
margin-left. 20px; e Tony! oltre teer, lo 

D 
Weve adding some margin to add 
жиг on te let of Ehe at tens 
2d aha a little bp padding to e 
tach Lat item a bit of headroom 
BRET ол = \ 
And, the final test drive. 111 —— ШШ 


"This is it your last change to Tony's dune 2, 2012 


site. Add the rule for the list item to your 
CSS and then reload. 


ну fret day oth vip cart beleve T ray got everyoning packed 


Hees Ue lk ith бе carke 
Tried ith an image and tome ^o $ снопова 
cba mar ad fag a ы 


M арш camera 


sensus Ax Lao Tau would have ead A journey of э 
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O what about ordered ele? 
Wat can dota change el style? 


2 You style ordered and 
unordered ists in e same way. 

Ol course, an ordered ist has a 
sequence of numbers or lator or 
markers, по bullets. Using CSS, you 
сап control whether an ordered ists 
markers are decimal numbers. roman 
numerals, or alphabetic letters (ike a, 
b, c) wilh the Iststyleaype property. 
Common values are decimal. upper- 
арла oworalpha, upper-toman. and 
lower ronan. Consulta CSS reference 
lor more options there are many). 


thereyarane 
Dumb Questions 


О; soa convo ine wt 
wag on iata? malhar wei how 
— he a иде 
nament erat 
К 


Д: te pay ets 
Taiye poston poate 
prety seo ll 
tipi tev ln 
—— wa oda 
жашаш 


Wow, who would have known 
we could take my site this for 
when we started? 


We're going to get Tess a Segway of 
her own so she can go with me on the 
rest of my Segwayn USA trip. See 

ya somewhere. and well BOTH be 
updating the web page, Thanks 
for everything! 


www it-ebooks.info 


tables and. 


Q; are you sure tat gt? 
Thal seems backward 


А: ves saturi ttn and 
oie ay eno pr 
weren et, ne 
meer Ft yuri edo 
tr wrap une ys 
w nt marr so 
sarin sooty 
Cader yey ta” 
wo mann br ea 
reto 
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&% ULLET POINTS 


HTML tables are used to structure tabular data. 


* Use the HTML table elements <table>, «o 
+, and «td» together to create а table. 

The <table> element defines and surrounds 
the enr table. 


^ Tables are defined in rows, using the re 
element. 

= Each row contains one or more data cells, 
defined with the <> element. 


* Use the <th> element for data cals that are 
row or column headings. 


= Tables are laid outin a grid. Each row 
corresponds to a be- row in your 
HTML, and each column corresponds to the 
A». <Р content within the rows. 


= You can provide addtional information about 
your tables with the <capton> element 


= Tables have border-spacing, which is the 
space between cells. 


= Table data cells can also have padding and 
borders. 


‘= Just ke you can control the padding, borders, 
and margins of elements, you can contral the 
padding, borders, and border-spacing of table 
cols wih CSS. 


^^ bordercollapse is a special CSS property for 
tables hat alows you to combine cel borders 
into one border for a deaner look 

= You can change he alignment ofthe data 
in your table calls with the text-align and 
wericaalgn CSS properties. 


You can add color to your tables with be 
background-color property. Background color 
can be added to the entire table, to each row, 
ar to a single data cel. 


Use the CSS nih chid pseudo-ciass to add 
background color to every other row o a table. 


Ifyou have no data for a data cel, put no 
content into the <td> element You need to 
use a «té». «td» element to maintain he 
alignment of е table, however 


If your data cell needs to span multiple rows or 
columns, you can use the rowspan or сорап 
atrbutes of he <td> element. 


You can nest tables within tables by placing 
the <table> element and all ts content inside а 
data cel 


Tables shouldbe used for tabular data, not for 
laying out your pages. Use CSS table display 
to create muticolumn page layouts as we 
desorbed in Chapter 11 


Lists can be styled with CSS just ike any other 
element. There are a few CSS properties. 
specific to lists, such as list-style-type and 
dsds e mage 

iststyie-type allows you to change the type of 
the marker used in your list. 


lsttylemage allows you to specify an image 
for your list marker. 


tables and more lists 


292 HTMLeross 
аР 


workout and solve this erossword. АШ the words are from this chapter. 


Across 

1. Used to control whether the marker is inside or outside the 
list items border. 

4. What a data cell does when it uses more than one row or 


column, 
7. Default positon of he caption. 

8. Used to merge bordes 

8. Use this property to use an image instead of a builtin 
marker in your ists. 

10. Area between borders. 

13. Adds a short description that is displayed with the table. 
14 You specify HTML tables by fol columns. 

15. We cal bulets a type of ist — -~ 


Down 
1. Use this property to change your list marker. 
2. Don't use tables for this. 
4 listitem-position can be used to control the behavior of 
t 
j. Table cells have padding and borders, but no 
used for these. 


12. One table inside another is called — 
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prd 
ЕТЕ 
ә te re- test [cue 
Lution td, th border: 1px solid blacks} 
Fist menu л metet 
“Teng Tonys Taber Cert 
HTML. Typing this p 
în, wile tds, = 
wil help get he сус 
Structure ol he — 
atie», <i>, eb, eee 
and <> tags in eine 
your head When 


you finish, give ita 
Quick test, and then 
add the remaining 
items from Топу 
table. Test that too. 


11a апа, им» 
casta 

e ee, 
pr 


9 
pre 
e e, 

es, 12 eee, 
een 

e ee, 


ва ec. 
ef 


minses oer he 
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Continven 


p 
съазаво bree. 
авось. 
tss. 

E 

</table> 
<чъову> 
pres 


Testing Tony's Table 
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E le +] Perens pourrai 


[ Gy | Dae Temperature id Populatio Diner Rating] 
[Wai Watts, WA ne 15 |5 NE |рэвве Jas | 
[Magi Cy. D TES — N 
(Bown, UT July ios or азва prim — pus ] 
Last Chance, CO July 2300 102 алво |раз |5 | 
(Тала ог Consequences, ХМ August th [93 kaajas 55 ] 
[Way AZ Етті вол [uo 5 ] 


exercise solutions 


BE the Browser Solution 
On the left, youl ind the HTML 
fers a fle агр is pd 

fre the browse 
tle able lens ee 
solution. 


<th>A1bum</th> 
</tr> 


<tr> 
<td>Enigma</td> 
<tdbLe Roi Est Mort, Vive Le Roil</td> 

</tr> 

<tr> 
p 
pc 

p 

<tr> 
p 


ончен. fes EE эшш -= 


</table> 


</td> 
on Sessions 6e/td» 


Artist Album 
inigma 


Le Roi Est Mort, Vive Le Roi! 


LTI Bukem | Progression Sessions 6 


‘Timo Maas | Pictures 
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tables and more list 


ur "m 


The double dotted ines are giving Tony's table a busy and distracting look. 
It would be much better, and wouldn't detract from the table, if we could 
just have one border around each table cell Can you think ofa way. 

ta do that with styling given that you've just learned? You can set the 
border-spacing property to 0 to remove the space between the borders. 


Суз 12 ft ET pere 
e be 


set spacing 
wld be right nest 


table | 
margin-left: 20px; 
margin-right: 20px; 
border: thin solid blacki 
caption-side: bottom; 
border-spacing: Opx; 


z= egm r ro нр 


Better, bt vwe sbil have es nes and thee rikt oF 
M 
\ jul an oer ve we ave dl bek de 
М де We'd rather it jst be ONE border between 
tal Wold we? 
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С“? lan — 
— ын, apart ned 
папасе And vo 
Stout ight alimentan th aitege and 
. how you would deta 


Ht Bypmert 


асул 
рекоа 


4 ол my Segusy^n ША travelec/emption> 


here you tad 
ah do i 
mon 
— Jone e, 
— a: 
— PR 


а classe sight" >= ied 
‘Std classc"canter'oi/se/ta»- 

epe 

rette 


То create altemating colors in the Magic City, Last Chance, and Why table rows with a class, 
add the class="cellclor attribute to the opening <tr> tags in the table rows, like this: 


Tuih 
Lution 
ا‎ a tne 


«n 


tables and more 


+ 
wwe SU ДЕ E03 
= SALTON 
Justo make sire урла got isdn, aan aro ton 
а <> loon i te conesponding ca no abe 


Here are the answers. 


<td class="centar">4/S</td> 
«em 


pu F242 fE 
Сомеңыеме, [IN 
NM [s 

Puy 


A Serious Exercise Solution 
To create altemating colors in the Magic Сау. Last Chance, and Why table rows with a 
pseudoxclass, use the nih-child(odd) pseudo-ciass to select he odd <tr> rows in the table: 


ж. 


trinth-child(odd) ( 
background-color: #fcha7a; 
‚ 
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Е BRAIN 
5 BARTELL TOLUTION 


{ts time to fall back on all that training you've done. What you need to do is 
change the table heading background color for just Топу and Tess, and do 

it without changing the background of the main table headings. How? You 

need to find a selector that selects only the nested table headings. 


We cam ме а бегей 
selector to select just the 
nested table header Here's bov 
ү= tan do that: 


(( бе IAME 20686 


(1) Start by setting fans UF "m аз o ann 
be outer table 


pers 


Then selatt the 
ale heading 


" a 
Ж table table th í 
background-color: white; 
) 


Determine the 
vier 


ае 
only the nested 
table heading 
temente 
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R HTMLeross Solution 


w 
R 
А 
Р 
Р 
[I| 
N 
6 


м 
eee eee 
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14 html forms 
" * " + 
Getting Interactive 


Yeah, just got your 
form. Were checking it 
with the server now, and 
‘then welll get a response 
right back to you, 


So far all your web communication has been one-way: 
from your page to your visitors. Goly, would it be nice NH your vistors 
could talk back? That's where HTML forms come in: once you enable your pages 
with forms (along wit a ite help from a web server), your pages are going to be 
able to gather customer feedback, take an online order, get the next move in an. 
online game, or collect the votes in a "hot or not” contest. In this chapter you're going 
to meet a whole team of HTML elements that work together о create web forms. 
You'll also learn a bit about what goes on behind the scenes in the server to support 
forms, and we'l even talk about keeping those forms stylish. 


this is anew chapter 648 


www it-ebooks.into 


browsers and forms 


How forms work 


If you mse the Web at all, then you know what а form is But you might not have 
really thought about what they have to do with HTML. А form is basically a web 
page with input fields that allows you to enter information, When the form i 
submited, hat information is packaged up and sent off to a web server to be processed 
by a server script. When the processing is dane, what da you get? Another web pag 
‘of course, as a response, Let's take a closer loak at how this works: 


The web server 


— wp athe dala and ther 
toL diam Bele ad sd server st 
an к cover te the web server 
del 


С 


Web Server 


Туе server strip processes the data in the 
Form and creates 3 brand-new HTML page às à 
терми, whith t hand bak to the web serwer: 


web Seer 


^ 


The response а an темф зе snd 
HTML web page deer sete 
o De ee. 


de 


response and displays & 
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html forms 


How forms work — 
in the browser — 


То» ктөн, a orm h jut it of HTML in a page prac а 


You'll ace that уоп сап easly стоме forms in your. iam 
pages by adding a few new elements, Here's how a 
form works from the browser's perspective: 


The browser loads the page 


‘The browser loads the HTML for a page like 
it always does, and when it encounters form 
elements, it creates controls on the page that 
allow you to input various kinds of data. A 
control is just something like a button or a text 
input box or a drop-down menu basically " ани 
something that allows you to input data. E 

dou onter аі m € 
You use the controls to enter data, Depending “7”, 
fn the type of contral, this happens in 
йаки ways. You can type a single line of 
text into a text control, ог you might click one 
‘option of many in а checkbox control. Well 
look at the diferent kinds of controls shortly: 


You submit the form 
Yon submit the form by clicking on а submit 
button control. Thats the browser's cue that it 
needs to package up all the data and send that 
data of to the server. 


The server responds 


Once the server has he form data, it passes 
it off to the appropriate server seript for 
processing This processing results in a 
brand-new HTML page that is returned to 
the browser and since its just HTML, the 
browser displays it for you 


T ————— ant 
CSS Cle iron 


Чу win sametine, yo be ве ita xo, 
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What you write in HTML 


There's no deep mystery to creating forms with HTML. In fact, in this chapter 
k together 
to create forms The best way to get а eel for forms is to look at a lile HTML, 


you're going to meet a whole new set of HTML elements that all w 


and then to give it a пу. Check out this form: 


<100СТҮРЕ html» 
<html> 
<head> 
<meta charset-"utf-8"» 
the Contest</title> 


ES e shelf a dà 


hat for yos now 


Here's the Form 


) 
ГА 


<form action="http: //wickedlysmart. con/hfhtmlcss/contest.php" 
method="POST"> a 
@ Ist type in your name (and click Submit) to 


We've got tre eoru 


enter the contest: <br> 


First name: <input type="text" name-"firstname" value=""> <br> 
3 ын ил n ERRAT 
<input type="submit"> 5 
8 
lg weed mide d 
</form> 


©©©] 


</body> 
<em> 
e 
— 
ر‎ r ands: 
Relax — a 
— an 
throughout the chapter. 


going 


What the browser creates 


Big surprise; to create а form, you use а <torn> element, Now. just about any block- 
level element can go inside the <form> clement, but there's а whole new set of elements 
that are made especially for forms, Each of these form elements provides a different 
way for you to enter information; text bases, checkboxes, menus of options and more. 
We'll examine all these elements, but first take another look back at the HTML oa the 
previous page and sec how the elements and content inside the «formo clement are 
displayed in the page below: 


Enter the Contest 
Here's just normal 


html forms 


mar e Sy > [C+] eee ebene en uni 


Just type in your name (end click Submit) to enter the contest: 
тек ә Mesum 
for entering a — a Lastname: 

(Soom) 


lat name 
HTL ү» we qe 
dementia eae ewe ИТ 


And heres the 
submit button 
(our button might 
say "Submit Query 
instead) 


Youll find the contest form in your ‘chaptert4/contest” folder. Open it, take 
а another look around, then load itin your browser and enter the contest 
Exercise 7 
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the form element 


How the <form: element works The method a 
Mia eite be 
sever Weve gona le 


мые 


Lets take a closer look at the <torm> element not only docs it hold 
all the elements that make up the form, but it also tells the browser 
where to send your form data when you submit the form (and the 
method the browser should use to send it) 


and the name арат well talk about 
The ation attribete Hie айг 
gs thee laa Il De URL of he ыы . ae 
Perge, me form veh sever proces the form might rol we POST 
„ы: \ жые We hte ne Fa 
ve 7 the erg = \ 
] m y V 
wee de ME 


«torn actions http: / /wickedlyanart.con/ifhtmlcas/Contest.php" ‘method="POST"> 


Everything wide 
dore see here 


E AD 
eds the fore 


Hey wickedlysmart com, my 
user just clicked a button to. 
submit а form. Туе got some form 
dota Тт sending you via POST. It's 
addressed to the "contest php" server 
Script in the "hfhtmlcss" folder. 


Bring it on. 
We're ready! 


easy part. But where do I get 


Okay, so Y have on HTML 
form—that seems like the 


а server script, or how do I 
make one? 


Good question. 


Creating server scripts a whole topie unto 
itself and far beyond what we cover in this book. 
Well, we tried 1o cover them, but the book ended 
up weighing more than you do (not good). So, 


To create server scripts, you need to know a 
scripting or programming language, and опе 
that is supported by your hosting company; Most 
hosting companies support languages like PHP. 
Raby on Rails, Perl, Python, Node js and Java 
(to name a few), and if you're interested, you'll 
definitely want to pick up a book specifically 

far creating server scrips (also known as 
server-side programs). Check with your hosting 
company: they sometimes provide simple scripts 
to their customers, which takes the work out af 


developing these scripts yourself 


As for this chapter, we've already developed 
the server seripts you'll need, All you'll need to 
do is put the URL of the script in the act Son 
attribute of your «forno element, 


overview of form elements 


What can go in a form? 


You can put just about any element into a form, but that's not what we really 
care about right now; we're interested inthe frm clement that erent conr in 
‘he boa, Here's a quick rundown of ай he commonly used form element 
Were going to start with the <input> form element, which plays many roles 
în the form's world. 


"4а 


Notice that 
both of 

these ме the 
sane HTML 
element, but 
with different 
values in their 
type attribute 


text input 


The text <input> element is 


Name: Buckaroo Banzai 
for entering one line of text. 


— н ot mata ge D 
attribute of “text! creates а ene-li 
ere Milled tea ac 


Мей frm elements venire а nane 
‘hak ic wed by the server seript WEN 
ме how Dis works in a bid 


Use the type attribute te, 
indicate you want a "tert" ingot 


VN eem 


element is à 
void element, 
se theres no 
content after it 


<input type="text" name="fullname"> 


submit input 


BN The button is labeled 


—= Cor "Submit 
(Submit) ) by default 


form. When you click this button, the ation س‎ ben 
browser sends the form to the server dange at м, 
script for processing. show for bow b 


У For a mbit button sett “abit” 
<input type="submit"> gg element's type 
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‘The radio «input» element cre Ө hot 

single control with several button; O —— 
only one of which can be selected О not ee auk 
at any time. These are like old-time panes 
car radio buttons; you “push” one in, к 
and the rest "pop out? 


All the vadio buttons 
Куу 


Use a 


— 
for eath choice sek of choices musk 


с” J have the same пате | а different dle 


<input type="radio" name: 
Sane here <input type="radio" name= 
vere sil wing 

dhe pul 
Чем jk 
wath different 
pori 


\ eheckbox input 


but cath choice has 


M Salt 
> ncheckbor приз element М Pepper 
creates a checkbox control that can B Garlic 


be either checked or unchecked. ias 
ultiple checkboxes jc MEME ار‎ 
Пером бд, мч ore of a set of cates 
check as many or few as you like. — 


Like ad - 
tra Mid deben a re 
nes прыця DIT 


шш oo p 


checkbox" name-"spice" value="Salt"> 
checkbox" name-"spice" value-"Peppe: 
checkbox" name-"spice" value-"Garli. 


„> 
"> 
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What can go in a form? (part 7) 


Okay. not every orm element is an <Lnput> element, There ме а few others, like 


<seleet> for menus and <textarea> for typing in more than one line of text, So, 
why don't you get familiar with these as well before moving on? Oh, and by the way 
‘once you do that, you'll know 90% of the orm elements (and 99% of the form 


elements that are commonly used 


textarea 


The <textarea> 


ment Customer feedback: 


creates a multiline text area T Tove ту new Mini Cooper 199 te гей, spony motel ard ve 

that you can type Into. Ifyou bean apg areund town ike there's ne тото т. ARA, PW 
e dm vl POS perche dom rir Осал ro 

into the text area, then a scroll d 
bar appears on the right side. 


Tee 
kr, e Lhe nm 
empty element, attribute b e 
АЯ eed ai ate. 
там dus bee мө Î il ares 
lasing tage: vide to m 
حل‎ ГА 
<textarea name="comments" rows="10" cols="48"></textarea> 
n ^ 
The төз attribute tells the | 
brovir how many abe, oy test that goes between the 
al to make the ке ening and беш tag becomes 


the тыа! des in the browser's 
tesk area control 


Yon tan also spetify he width and height of a textarea wing CSS 
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select 


The «select» element cr 


tes a menu | 
control in the web page. The menu (Buckaroo Banzai 8] 


provides a way to choose between a set The «dei det йене N 
Senden an ene rh) 
omitti th pn و‎ te h 


element below to creat 


menu. will vary depending on the 


browser you're wing), 


EPA 
trap then nines a È 


Jk Me the other form elements 
wee be Mk decet à mint 


jc the select derer a e 


pou 

— 
. Bansai</option> 
“option values Tonny'opertect Tommy /option> 
T 
“option values Peres to Serwey®/option> 
. 

creec 


option 

The <option> element works with After licking on the 

. mens be nen tans | Perene Tomen 

manu- Use an <option> element drop dow — 

foreach menuitem. چ‎ 8 

— 
The content of the 

— — Peres mde o E 
<option values"Buckaroo"»Buckaroo Banzai«/option» ^ for the menu items! 
<option value="Tommy">Perfect Tommy</option> description. Each menu 
<option value="Penny">Penny Priddy</option> option 
<option value="Jersey">New Jersey</option> valve repre 
. e 


</select> 
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even more form elements 


Wait, HTML 
adds even more great 
input types! bent 
forget those! 


Oh, even wore can go in a form! 


Ab yes, we can't forget all he new fun stu With HTMLS, 
we've got even more specialized input forms Let's take а look 


number input — 782 


The number «input» element restricts 
input to numbers. You can even specify. 
a min and max number that is allowed 
with optional attributes. 


Some browsers shaw arrows 

nerk do the input area 
tan we to tate or 

per 

The “number” type means you're expects 


: ДАР 


range input = 
to number except that it displays a step attribute you tan use to specify the 


slider instead of an input umber of intervals for the vues 


<input type="range" min="0" max="20" step="5"> . 


color input 


Use the color <input> to specify . 


<input type-"number" min="0" max="20"> 


a color. When you click on be "ied by 
control, а color picker popsup Û brower, 
that allows you to select a color — 9 Jet set 


ethan having to typein 4 tert 
. value © pisi] <input types"color"> 
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Use the date <input> element to specify 
a date, with a date picker control. The 


control creates a valid date format string 
to send to the server script. 


<input type="date"> 


Like with tolor, if the date inp v 
bronzer yet: youll get a regular text input instead 


2 
/ ча 


supported by the 


email input 
come m ARR 


you'll get a custom keyboard for email 
when you start typing. 


<input type="email"> 


Email: Buckaroo Banzai 


ur] input P 


Like email and tel, the url <input> 
type is just a text input, but causes 
а custom keyboard to pop up on 
mobile devices. 


<input type="ur1"> 


URL: http://banzal.com 


Even with Dee specialized types, 


wp te you te 
make sure yos know what valves the server чен is 
expecting and vie the right <input» type 


tel input 


The tel <input> element is also just a text 
input, but like email, causes a custom 
keyboard to pop up on mobile devices. 


<input type="te1"> 


Phone: (555-1212 


( 


N These three <input types ae all variations oF the 
deck өр ype On desktop browsers yos won't 
velie a differente: But on mobile browsers, you might 
Jet a tuom keyboard {hat makes caer is get to 
у= need, hike 7 and 8 and ber. 


the charac 


Not all browsers 
fully support these 
input types yet. 

To input ypes on these 
wo pages are now m 
HTHLS, and wo you can usa them 

û all Web pagos now, some may ar 
display as you see them here. á 


Watch it! 
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the bean machine 


The Starbuzz Coffee website 
is kicking butt. We've got a new 
concept called the "Bean Machine,” 
which is on online Form to order 
ош cof ees, Can you make i 
happen? 


A drape down mene 
и of coffees А 


Ta, 


ground colle 
(yo tan only 


chore ne) 


How many 
bag, and 


Nanber of р ner 
Must rive by date TTT Û oe 
E=. 


GE wap 
get — aw 
of Include сод with order С {геч 
боом zere 
mir оте, or both) 


ве, | 
what 22 
the form address, 

— ТР? tang 
is ie a a 


A bon for 


hda 
кез 
Ten 


H 
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EA Markup Magnets 


Your job is to take the form element magnets and lay them on top 
ofthe corresponding controls in the sketch You wont need all the 
magnets below to complete the job; some will be left over. Check 

your answer in the back of the chapter before moving on. 


Choose your beane 

Shade Grown Bola Supremo 
Tye 
© Whale bein oe | 


e 6 - 


Number of bags: [— — — 
Must arrive by dates i) 


—= 
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creating th 


Getting ready to build the Bean Machine form 


Before we start building that form, take a Look inside the "chapter 14/starbuzz" 
folder, and you'll find the file “form html". Open it and have а look around. АЙ 
‘this file has in it are the HTML basies: 


<!DOCTYPE html» 
<html> 
<head> 
<meta charset-"utf- 
<title>îhe 5 
</head> 
<body> 


> 
Bean Machine</title> 


агы 


<h1>The Starbuzz Bean Machinee/hl» 
<h2>Fill out the form below and clici 


"order now" to order</ha> 


Al wee got so bene 
heading derbi yos the ae 
along with меб 


The form i 
</body> sons to yo here 
«ntn» 
For now we're song to build these 
Bl he style we've been 
Аа ake That, 
ay ue tan concentrate оп the form 
"m" 


WML Well әда the style in later 


Figuring out what goes in the form element 


e time to add your very first «ton element. The first thing you have to know 
when creating a c£ is the URL of the server script that is going to 
process your form data. We've already taken care of that for you; you'll ind the 
server script that processes Starbuzz orders here: 


http: //starbuzzcoftee.con/processorder-php 


This URL res t the and to the protesiorder php server 
шз» Coffee weburte seript that's on the server 
This server stip already knows 
how be take orders From the form 
ing to build 
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Adding the <form> element 


Once you know the URL of the server script that will process your form, all you need. 
todo is plug it into the act Son attribute of your «fora element, ike this (follow 
along and type the changes into your HTML: 


<!DOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>The Starbuzz Bean Machine</title> 
</head> 
<body> 
<hi>the Starbuzz Bean Machine</hl> 
<h2>Fi1l out the form below and click "order now" to order</h2> 
<form action="http: //starbuzzcoffee.con/processorder php" method="POST"> 


— t e 


bes dee, The ation attribute contain the — wi 


of Dae sere ct фа меде went 
</form> К bd vt 

нта he fore data lo бе serier 
А SN eet نان‎ More on Ge ble 


(orm dining tay too 


So far, so good, but an empty Еола clement it going to get you very fr Looking back 
i е form, there's a lot there to add, but we're going to start simple and get 
rt of the form done fist, which consists of a bunch of text inputs and a 
amber input. You already know a Ше about ext inputs, but lets take а closer look. Here's 
what the text inputs for the Starbuzz orm look like: 


Here the type ie "tee because this 
is going bo be a text input. contra 


RESA бырс Кыз 

dual for afew EOE types” 

different ebe, <input typas"text" 

Tete ate 

Mi e wa ked 

of control it is. <input type="text" 
кунса ны 


< ee p» one tert 
int lo each pa 
SM area in the form 
Name, Address, Cy 
State, Zi, and Phone 


<input type="text” 


— 
zip» ЕУ 


<input type=" te1" name="phone"> 


Here the type is ЧГ betause we've expecting 


rê airy ars The lone attribute ats at an identifier for the 


data the user typet in, Nebice how eath one а set to 
a different vale: Let's see how this works 
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How form element names work 


Here's the thing to know about the name attribute: it acts as the glue between your 


form and the server script that processes it, Here's how this works 


Each input control in your form has a 

name attribute: 
When you type the elements for a form into your HTML. 
file, you give them unique names. You saw this with the. 
text and tel inputs: 


a'ee got an element 
~ Notice here we've 9 


<input type="text" n 
<input type="text” Each аі clement 


gels ils oom name. 


<input type="text” 


<input type="text” 
<input 
<input 
What. you enter into 
When you submit a form, the browser the form 
packages up alll the data using the 
unique names: 


Say you type your name, address, city, state, zip, and „—% 
phone into the form and click Submit. The browser takes 


Y 
Name: Buckaroo Banzai 


[К 


tach of these pieces of data and labels them with your су Los Angeles 
unique name attribute values, The browser then sends State: CA 
the names and values to the server. Like this zp 90050 


Phone: 310.585 12 


raves for eeh Tee тама 
es- = Bansal Institute 
— tos Angeles 


zip = 90050 9 
Each ине = 310-555-1212 processorder php 
рсе] from be 

dats yoo те 


ebe the Form 


77 (sieh is perfectly Fine 


wats be anten 
text inputs anda careo? 


А: esto urea lent anu or 
roto Pat apeta segle i, he 
тоте араш anda a> 
— ent. 


cant make the љой button say 
someting other than "Submit? 


2 Yes, jast put a vae attribute inthe 
"lont and give La value йе "Order Now. 
You can also ue ће value abut of lex! 
Input to ge that input some default text 


О: пакет a timit to how much 
ten can ype into a text <input» or a 
po 


А: roa ttt en te 
Siberia hara 
— hone fb 
sil vn mre ano rete 
пе lod thon mh ar 
edo toros m be pom 
tia hating dite and sal toa 
ctc bef ac enn, 
"egt cu og 
are dui Horam га 
ao ere ro uay ш ао 
"mtr uri cn e 


Q пе чыг, таг, and “ut” look 
{ust ike text inputs. ls tbere really а 
pon 


А: meat mar эмиг ype iva 
alkana a ge san et 
Аран fr etat fe a oe 
attore пой Hora caa Pe 
Sewanee ei br 
ines d an bea M ши ab e 
isar verace pos a vse So, on 
dice soo f ийни oj 
pay a munere prona ола 


dempmen | 
Dumb Questions 


О: ашеи зн пон the namas gt 
matched up with бе fom dala. 


А: okay ou iow eaen em ement 
hata IR mon ani yu dear 
бай nanan has астро ае. 
Yan you cie be tn те 
one gf anh бөк 
tne eon le saren For 
lars en ou p eap code os” 
алш п> ате мй orare. 
эу eben маш p= SD ште 
— ит або 


Q; now done to sarvar sert no 
Sen Pn pol i asia fo 
inter wor hou во рее he ramas 
formy om en? 


Д: cot qn, nota be 
ter way aroun: you havo ok al 
fom nares your saner fp caning 
эмд yow om maeh ru 
‘Sig sarvar et tomo ө 
‘rl, tet havea you ahat ramae 
хоца or prova hal паитида 
wee fr ecol A good lac to 
ft at your basing — 


О: wy done the <option» element 
have a name attribute? Every other form 
element dos 


Д: cond att opto cis 
ataca pal Pe nanu Pla ats 
byte le tmo. ба we ony reay 
— — 
dee pected ac өтөп. 
Ince wars, olo етта or 

tend anaes hecha elec 
тас tay pecs are о re 
теш. Кыр ind a unen he om le 
Сатана oniy бе aie rey 
жесе opion a вай ay wh ane 
b 
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О; nian yeu say att rame or 
scl fomm denn Zand шаш? 
But eraio cap sements al ave 
бешим, 


А: нән Rado vunonscomoas asat 
Тый ади ou push one butonin De 
Tast pop out So. or те rovro ow 
Te rado ton baong get, you ueo 
Tno sama rane. Say au havea идо 
bo ramea tr it luti d d 
умт and he Theyre a cars and 
ony ona calcar besa ate, so 
aga rare eta ee, 


Q wnat about checkboxes? Do they 
werk ike radio buttons? 


fesi he опу diference is thal you are 
alowed to select more ап one choice wi 
асо 


When the browser sends Ње form data to 
the server, I combines al he checkbox 
values into опе value and sends hem. 
ong with he checkbox name. So, say you 
had "spica" checkboxes for ‘sal, “pepper 
and "gri" and you checked them al 
then ba browser would send "spice = 
satégoppergari othe sever 


О; сш, dol realy naed 1o know a 
thst about how data gets the 
p 


Д: м youness озгон tera ana 
‘pf elo eens your caver 
еей Bayona ia og он al 
eat sommes hs, bul mu dot 
Seed no la abe e sans 
i wha naing slot алат 
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Back to getting those «input» elements into your HTML 


Now we've got to get those «input» elements inside the form, 

Check out the additions below, and then make the changes in 

your "form htm file, 

Here’: JUST the form 
tippet from “form hinl" 
Hey, we've got do save a 
fer Gees Keel 


Weve gang te Nest elements directly 
start by tbr e imide a form 
everything inside 


v 


<form action="http: //stazbuzzcoftee..con/processorder php” methode"POST"» 
Ship to: <br> 


Nane: <input typec text" палас палео <br> nm 
Address: <input types text" name- address") <br> cre tne 
City: <input types"text" nane="clty"> <be> jeans 
State: <input eres terte names"state"> <br> , шы 
Zip: <input type="text" nane="sip"> <r> of the form 


> Phone: <input type="tel” name="phone"> <br> 


</p> 
+» 
<input type="submit" value="Order Now"> 


</p> J 
</form> 
Ped you thd ako knew that cope» is an 
We've added a label for each inline clement, so i үш sant sone nebel, 
бере the <nput> elements, yor have to 


| add bros Thats alto why you need to nest 
‘hem all inside a paragraph 


V donit forget bat ме need а ubrit button $o 
‘the form So add à submit button by marina an 
bet with a type of “submit” Also add 
a lle of "Order Hon” which wil change tne ent of the 
button from "Submit" to "Order Now’ 


After you've made all these changes, save your “form himi” 


n't forget to validate your HTML- 
Form elements need validation too! 


anders give this a whirl 
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Reload the page, fl in the text inputs, and submit the form, 
When you do that, the browser will package up the data 
and send it 1o the URL in the action attribute, which is at 
atarbuzzeotfae, com, 


Pod heres the pone 
after submitting the frm 


Here's the form. 


html forms 


LA Yr dent tink we ge You a toy example 
that doesn't relly work, бе ou? Sen, 
апага есь i all ready te take your 
Form mbnission. Go for iE! 


Notte De change in the 
URL of your addres bar 
эйе yos brit the form 
Sl а бей. к te 

fers аб attrib in 
the addres bar) 


‘The Starbuzz Bean Machine 


‘tw el ome Va при nce ac 
.. eti ere 


Kane 


\ 


Here's the server steil 
reponse HÈ looks like the 
rt got what we submitted, 
buk we haven given iE 
everything it reede 


Adding some more input elements to your form 


Te looks like the server script isn't going to let us get very far without telling it the 
beans we want, as well as the bean type (ground or whole) Let's add the bean 
selection first by adding а <aelect> element to the form, Remember that the 
select» element contains а list of options, each of which becomes а choice in 

a drop-down menu, Also, associated with cach choice is a value; when the form is 
submitted, the value of the chosen menu option is sent to the server. Torn the page 


and let's add the <ве1ест> element, 
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Adding the <select> element 


<form action="http: //atazbuzzcof fee. con/proceasorder.php” method="post"> 


Meer 
Жу M шшш 
р у E 
) 8 
AE E E ош о е 
% 8 
. 


</select> 
< Irae, we pb each copie 

= element, oe per chote of toffee 
+» 


Ship to: <br> 
Nase: <input type="text" name="name” value=""><be> 
<input type="text" nanes"address” value=""><br> 

<input type="text" namem"eity" value="*><be> 
<input type="text" nanes"state” values" sehr» 
: <input type="text" namee'zip" values" »cbr» 

Phone: <input type"tel" ns- bene, value=""><br> 
ч» 
E 

<input types"submit" values"Order ном" 


0 HTML Up Close 


Let's take a closer look at the <option» element 
The content of the 
سر‎ element is wed аз the label 


Each option hata de 1 Vas 


<option value-"Guatemala"»Organic Guatemala</option> 


When the brouser packages vp the names 
and calves of the form clement it wis In this dae, the browser wold send 
the name of the <iclett> element long 7 the server beans = "Epatenala” 
wath the vale of the chosen option 
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Test driving the «select» element si 


Let's give the «select» element a spin now Reload your page, and 
you should have a nice new menu waiting for you. Choose your 
favorite colle, fl in the rest of the form, and submit your order. 


The Starbuzz Bean Machine 


mang edes 777 fer mow" to order 


тга 
vn 00050 
wee Bös 


We still haven't given the server 


cee чн 
Кур psa 
ата >a 
Here's the reat of E 
Wee 
pat ober 
Pubs 


| 


Here's the forny compete with 
a айе element. Netice all 
be options are here 


‘as, Dk Bak o_o dt pt hora 
— ̃ — фен 
ee mier t m 

eee 4— — Looks ke Starbvez 

— e armes ve mant | bay of 

тА оаа ey. 
E 

Een 
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S 


Change the «select» element name attribute to "thembeans". Reload the form and resubmit 
your order. How does this affect the results you gat back from the server script? 


Make sure you change the name back to "beans" when you're done with this exercise. 


Give the customer a choice of whole or ground beans 


The customer needs to be able to choose whole or ground beans. 
for her order For those, we're going to use radio buttons, Radio 
buttons are like the butions оп old car radios you can push only 
опе in at a time. The way they work in HTML is that you create 

puc of type “radi” for each button, so in this ease you 
need yo buttons: one for whole beans and one for ground. Here's 
what that looks like: 


Type: <br> 


<input type="radio" name-"beantype" value="whole"> Whole bean <br> 
‘input typec radio" name="beantype" value="ground"> Ground 


</p> ^ ir Е 
) ) Nobel tat ve 
We're sing the <input> Here's the unique name: wall be ben label radio 
clement for this, with its All radio buttons in the sent te Э ly betten on the 
oe ame group share the one of these will be sent (the kand side ol 
tn peti. se that а ett wien be YS ade of 
Form is submitted). шына 
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Punching the radio buttons 


"Take the radio button HTML on the previous page 
and insert it into your HTML just below the paragraph 
containing the <select> clement. Make sure you reload 
the page, and then submit it again. 


FUN out the form below and click "order now" tarder | baden due, 


a yo may hive noted that 
e ado button was pressed 


— eme veleaded the page 


ze 90050 
C o 7 


Wed Starbuzz tok our order, and Bean Machin 
vere not even done with yel Weve W Т 
atil got to add the number of bays, “ak, ac el yore tn Sah Be hin 
the sip by date, the s options, and 


an area for customer de. Se 


Нов could the order work without all the elements 44 555 
being in the form? Welt ай depends оп how Жл 


the server script is programmed. In this case, itis 
programmed to process the order even if the gift 
wrap, catalog options, and the customer comments 
are not submitted with the est of the form data, The 
only way you can know if а server script requires 
certain form elements so talk to the person who 
developed it, orto read the documentation. 


you are here> — 688 


www.it-ebooks.info 


using more input typ 


Hey, 80% of our customers 
order ground beans. Can you 
make it зо the ground bean type 
is already selected when the 
user leads the page? 


Ifyou add a Boolean attribute named ‘checked into your radio input 
element, then that element vill be selected by default when the form 

is displayed by the browser Add the checked attribute to the "around" 
radio cinput» element and give the page a test Youll find the solution 
inthe back of this chapter. 

(Remember that Boolean attributes don't need a value; if the attribute 
‘checked is present, then the input control is checked) 


Using more input types 


Nest, we need to get the number of bags of coffe the customer wants to purchase, and 
the arrive by date, Both of these are <input elements, but rather than just using basic 
be more specifie about the exact type of content we want in these 


text inputs, we 
«input» elements by using the “number” type forthe number of bags, and the "da 
type for the arrive by date 


For the number of hags, we can get ew 
and maximum number of bags allowed: 


more pci, by speci both а amm 

йм the “number” type and specifying the min and мак number of 

ERE Û apoE tra pericu 
Mb nere бак O bag of ont Hind of cofee at a ne 


Humber of bags: <input types'number" names"baga" mins =? 
p ded by using the "date" type here, 
browsers that support this type wll 
help ost the customer by popping up 
a date picker cont s 


А to a valve that works for 


maxe"10"> 


Must arrive by date: <input types'date" name="date"> 


Youll get an error message if you bry to enter more 


Now, if you try to enter more than 10 bags or fewer Cor less) than the allowed max or mim ¬» 
. dat support he “number” 2 
input» pe, eil got an enor menage wen You donner GEM N 


e M DM carte E Value mun be less than ar equal 10 
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Adding the number and date input types 


Go ahead and add the two new <input> elements to your derm hin file, below the. 
ean type <input>s and above the Ship To fields, and give your new code a test drive. 


<form action="http: //starbuezcoffee.coa/processorder php" methodn"post”> 


Values House Blend">iiouse Slend</option> 

values" Bolivi, Bolivia Supremoe/option» 

. Guatenala¢/eption> 
nyas/option> 


</p> 


name="beantype" values whole*»ihole bean<br> 
name="beantype" values"ground” checked>Ground 


+» 
usber of bags: <input types'number" bases bags, mine"l" max="10"> 
</p> 


E 
Must arrive by dace: <input tgpes'date" names" date"> 

en 

+» We've added the new tode 
Ship to: э here Remember that 
Nane: <input type="text" name="name" values" тээ browsers may display these 
Address: «input typee"text" namae"address" val pn, differently, depending on 
Cisy: <input typem"text" names" city" values "><br> which browser yout ving 


State: <input type="text" names"state" val 
р: <input type="text" namem"zip" value. 
Phone; <input type=" tel" nanee"phone" value=""><br> 

ч» 

ES 

<input types"subeit" values"Order Now"> 

</p> 

</form> 


Try more than one browser! 


"Turn the page to see the results of our test drive. 


html form 


СА 


test driving the form so far 


Test driving the number and date «input» elements S 


The Starbuzz Bean Machine 
is oai no fe айа adari iaia — — 
J Here's what we entered Е 

into the form Notite — 
disk the venere y 
Bt the date contral is Bean Machine returns 
jet a bent inpet in ti Lodo ike we ordered 
rer (Chrome) 5 bags of cable! 


Completing the form 


You're almost there, You've got just two controls 
чо add to the form: the “Extras” control with wo 
checkboxes and the customer comment control. 
You're really getting the hang of forms, sa we're 
going to айй them both at the same time. 


The Extras sebo toris of tuo 
thetkbones, one for gift wrap and 
another to ihade 3 tall 


le Jooks hke e "hehe catalog 
option should be checked by defaut 


The Customer 
Comments thon i 
jt a tete 
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himt 


Adding the checkboxes and text area 


You know the drill: look over the new HTML and add it to your “form hmi" 


<form action="http: //atarbusscoffee.con/processorder php" mathodn"post"> 
ES 


<select names beans" 
<option values"ouse Blend">iion 


Blende/eption> 


<option value="Bolivia">shade Grown Bolivia Supsence/aption> 
<option value="Guatemala">0rganic cuatemala</option> 
<option Renya">¥enya</option> 
</select> 
</p> 
<p> 
po 


<input types'radio" names'beantype" values"whole”>uhole bean<br> 
<input type="radio" names'beantype" values"ground" checkedbGround 

</p> 

ener of bags: <input types"number" names"baga" mine"l" max="10"></p> 


Wpeust arrive by date: <input types date" names date"></p> 
Here wee added a chetbos for cach option Мере 
ES USt Dice are De aet nine ext WES geen ce 
9 a 


<input type="checkbox" names'extras[]" valuee'giftwrap'bGiit deter- 
<input type="checkbox" names'extras[]" valuee'catalog" checked>include catalog 


"E ^ S. 


Were wing the As wth the 
+» checked attribute radio bet 
Ship to: d to specify that weve pt 
Nane: <input type="text" name="name" valuas""><be> fhe cal ql ecib do 


Address: «input type="text" bare addr 
= <input types" text” 


rr should be checked the right of 
by default ү» the Gelbe, 
ada a checked 
alive be mort 
than ne eb 


iip: <input types" text" name="2ip" value 
Phone: <input types"tel” namee"phone" value=""><be> 
</p> 


<р>сизтолет Conments:<be> 
textaren name=" coments"></textarea> 


ч» A 
E he text area 
<input type="submit" values"Order ном" 
ч» 
</form> 
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successful submission 


The final form test drive S. 


Save your changes, reload, and check out the new form. 
Don't you think i's looking quite nice? 


‘The Starbuzz Bean Machine 
Fi ot the form below and click "order now" to order 


Meere TET 
Here's our brand-new 
4E ehetkbones, with the cata 


Бє. 
me 
а 
oy sages 
Pe mm tnd a nite new 
desk area as well 
eee 
6559 


бек already checked 


Various torbirabons of s 


Gar ker bebte ght 
uet a cat 
leot ier and sed 
and sc hw tal work 
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Here's hak ү» ge when you sbi 
The server sert ha rezoned all 
he orm data on the fer ard hae 
incorporated # nto the response 
age See үө can lacake al he 
Vio тална 


arte иы 


—— мере joe үш. 
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‘Stop right there. Do you 

Think I didn't see the way 

yeu slipped in that element name 

of *extras[]? What's with those 

square brackets! You have to 
‘explain that. 


Believe it or not, “extras[]” 
is a perfectly valid name for 
а form element. 


But even if it's valid, it doesn't exactly look 
nomnal, docs it? Here's the deal from the 
perspective of HTML, this is a normal form 
element name; it doesn't have any eflect on 
the browser at all if it has square brackets in 
the name 


So why did we use them? It turns out that the 
scripting language that the "processorderphp 
server script is written in (PHP) likes a itle 
hint that a form variable may have multiple 
values in it. The way you give it this hint isto 
add II on the end of the name 


So, from the perspective of learning HTML 
you сап pretty much forget about all this, but 
you might just tuck this into the hack of your 
mind in case you ever write а form that uses а 
PHP server script in the future 
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match the form па, 


form action="hetps / fun. choo: 


BE the Browser 

Below, you'll find an HTML form, and on the right the data a 
user entered into the form. Your job is to play like you're the 
browser and match each form element name with the values the 
user entered. After you've done the exercise, look 
at the end of the chapter to see if you matched up 
‘the form names with the values correctly. 


m/choice.php" metho 


<p>Your information: <br> 


text" name="name" ><br> 


diame: <input typ 
Zip: <input type="text" name="zip"><br> 
P 

‘cooper >iini Cooper</option> 
'cooperS"»uini Cooper s</option> 
‘convertible">ilini Cooper 


<option value: 
<option values 
<option values 
</select> 
<p> 
<p>fhich color do 


nvertible</option> 


<input type="radio" name-'color" value="chilired"> Chili Red «br» 
<input type="radio" name-"color" value="hyperblue"> Hyper &luc 
+» 
<pzîhich options do you want? <br> 
<input type="checkbox" name="caroptions[]" value="stripes"> Rac 
<hr> 
<input type="checkbox" nane="caroptions []" value="sportseats"> 
</p> 


Stripes 


<p> 
<input type="submit" value="Order Now"> 
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html form: 


ana See 
Биз а СС 


Choose your Mini Cooper 


Your information: 
Name: Buckaroo алга 
ы And here's the Form filled out: 
Which model do you want? 
eker conversie FE) \ 


Which color do you want? 2 
© Chii Red 3 
Hyper Blue 


Which options do you want? 
iS Racing Stipes 
С Sport Seas 


M 


th eath piete of f 


© farm name and poi 
эммез here 


name = “Buckaroo Banzai” & 
zip = 
model = 


color = 


caroptions[] = 


Extra ted 
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form methods: got and post 


Now that we've got the form 
finished, can we talk about the method 
‘the browser uses to send this data to the 
server? Weve been using POST, but you 
said there are other methods, to. 


POST and GET accomplish the same thing geting 
your form data from the browser to а server but ín. 
wo different ways, POST packages up your form 
variables and sends them behind the scenes to your. 
server, while GET also packages up your form variables, 


but appends them on the end of the URL before it 
sends a request to the server, 


With POST, all the form data is sent as part of 


im ‘he vest and is invisible to the wer 


The vier jut sees 
the server tet 

3 URL in her browser 
http: //wickedlyemart .com/hfhtmless/contest.php € address bir 


With GET, the Form data it added to the URL 
itself, so the weer sees the Form dala 


Notite the form 
data added on 
to the end of 


cer m 


bar 


http: / /vickedlysnart.con/hfhtmlcss/contest.php?firstname-buckarco&lastname-banzai 
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html forms 


Watching GET in action dab ds M cid 


nderstanel GET than to see it în action, From "POST" te "GET". 
Open up your “ora unl” Ше and make the following small change: y 


There's no better way to 


<form action="http://starbuz: 


offee.com/processorder.php" method="GEE"> 


Save and reload the page; then ii out the form and submit it. You 
should see something like this: : 


Tie Starbuzz Bean Machine 


: Youll see tis URL 
in Your browser. 


[ЕЕЕр://яЕатызттсоЁЕве con/processordar.php?beans=Kenyatbeantype=groundé 
jaxtras}5B85D=catalogénane=Buckaroo/Banzai éaddrese=Banzai+Inetitutescity= 
lLostAngeleséatate=CAézip=90050sphona=3105551212écomments=Greattcoffee 


Notice that the browser entodes 


low you tan see every form 
Now y j various characters, Ше spaces The 


clement rame and its valvet 


pru sever se uil aono decode 
waht here e be WR Toc poer tica 
ermen 
Dumb Questions 


woud want users la ba abla to bookmark 
the page. (Otherwise, every time thay 
‘atu o Ње bookmark, the ardor would 
prem 

Asitaton when jou never want to use 

ıa GET is when he data in your orm is 
private, йе a credt cara or a password. 
Because the URL isin plain view, he private 
information в easly found by others 1 they 


О: Why is tt cated GET len О: so why would use POST over GET, 
sending something to the server? or vice versa? 


— Whats ne nan Jet ot Д: There wea cul oi вонка. 
spe otra ватани. ene LT a ata 
Ee per Ms 
more data to the end of the URL. Other than a POST. When would you want to do that? ‘ook through your browser history or ifthe 
thal, the browser just acs like ifs а fo Sey you have a server script that returns a СЕТ Somehow gets bookmarked, 
НИИ РНН ce ape e А 
RPS one abe pand, esos ГУГЛ aal Son GET fost t 
ETE e 


On the lhe hand, you have a server beigen ger 


‘Script hat processes orders, then you 
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test yourself: 


bial ad 


GET or POST 


For each description cce either GET ar POST 
ependingon which method would be more 
Spproprints you think could be eer cle 
oth. But be prepared to defend your arees, 

GET POST A firm for ping in a username and рачим, 

GET POST n for ordering CDs: 

GET POST A form for looking up curent evens 

GET POST A forn to post book reviws. 

GET POST A forn for retrieving benefits by your government ID number 


GET POST form to send customer feedback. 
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00 


ктт тат 


The Starbuzz Bean Machine 


Fill out the form below and click "order now" to order 


Come ушш ea seems 
т 


Maw rey te этат 


Deere Comments 


Ive been meaning to 


‘say, reat job on the Bean Machine! 
This s realy going to boost our coffee 
bean sales, All you need to do is give this a 
litte style, and we're ready to launch it 
for our customers 
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html forms 


‘BRAIN 
POWER 


Given everything you 
know about HTML 
and CSS, how would 
you approach styling 
this form? 
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deciding how to style the for 


en your pec 


Forms are usually tabul 
layout works well for designing your form's presentation 
the Bean Machine form. With this table display layout, the page will look like a real form rather 
than а ragged collection of input elements, and t will be easier to read. 


their layout, so you'll probably find that using a CSS table display 
and that's what well use to lay out 


Before we do that, let's figure out the table structure thats inherent in this form. Starting with 
the sketch below fit the elements into а table (hint: we found it fits nicely into 2 columns and 14 
rows), зо each row is represented with a block element, and each cell is also represented with a 
block element. Notice you may have to add some structure to the HTML to make this work. 


the vest page before you do the 


No pecking 
Р oF somethin 


€ | Gû eee keen 


The Starbuzz Bean Machine 
Fill out the form below and click “order now” to order 


html forms 


E г pencil 


table display layout works well for designing your forms presentation. and thats 
what well use to lay out the Bean Machine form. With this table display layout, the page wil look 
like a real form rather than a ragged collection of input elements, and t will be easier to read. 


Before we do that, let's figure out the table structure that is inherent in this form. Starting with the. 
sketch below, fit the elements into a table (hint: we found it fits nicely into 2 columns and 14 rows) 
so each row is represented with a block element, and each cell is also represented with a black 
‘element, Notice you may have to add some structure to the HTML to make this work 


Here's what. ve came up with, compare to your 


e 
Mni ren docs be sieh of the table 
Zp) н. a simple table mw |р 
ATR, M оета and f rows 
1 7: гир main art of the 
pun 
The Starbuzz Bean Machine 
The lel for 
ach form | Fill ovt the form below and elek "arder now’ to order 
clement е in ДЫ Wee bes all the inp 
the left cl] Chew yor bake (sl Я elements into the righthand 
теа | — "ron — 
are get e т TERT 
qub | эшш — —— Кы ы чен уер ш 
d + of chetkbones and vadio 
uoo m ens into one ell 
The tell on . 
beret tne — са — each ell 
of “Ship Mies — — — torresponds to а blotk elements so 
eren = well add some nare <p> det. 
there's о pu s make re weve gota separate 
Central here + Мык clement for eth cell 
Ne elon — ==! Ard well abo need sone extra 
‘the left of block elements for the rows. Well 
бе submit ve фе cme pot ewe 
pre did before (n ater ID. 
ey Theres Hed Finally, vll need one element 
tro label te Bal contain everything for Be 


мк | چ‎ p id table itself. We can use the Form 


clement for thi! 


We made the ket area bigger too! 
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structuring html for styling the form 


Getting the form elements into HTML Reay Bake 
structure for table display layout HIME 


Now that you know how to organize the form elements in а table display layout, 
you need to put your HTML writing skills tothe est So get typing! 


Just kidding. We wouldn't make you type all this.. afier all, this chapter is really 
bout forms, not table display layout. We already typed this n for you; its in the Here's the <form elements 


file leben html" in the “chapterl4/starbuzz" folder. Even though it looks secre going to we thin 
complicated, i's really not that bad, We've added a few annotations below to point “hg fey the ЧЫМ 
out the main parts tard of the dio 


uu 


jorder.php" methode'post"» N 


à «dio with‏ و 
the elis tablo" For‏ 


‘<option 
<option 
<option 
<option 

</select> cs 


</p> С, 
rd the ee tent for each cell 


— 
<p> Type: </P> sedis 


+» 
<input type="radio" namee"beantype" value ole beans i 
<input type="radio" namee"beantype" valu checked Ground ] N. 
</p> J 
чал» 


‘<div clase="tablenow"> 
<p> Number of bags: </p> 
<p> <input types"munber" names bags" mine 


maxe"10"> </p> 


<p> Must arrive by date: </p> 


. 
Velia әд the erbe, delle we pal 
the form elements for eath mene in ove data а) 
<input types"checkbon" mamentextras[]" valuow'gifewrap"> cir: угаре Û 


<input type="checkbox" names"extras[]" values"catalog" checked 
ude catalog with order 1 


Code tontinses on the next page 
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html forms 


Reavy Bake 
HTM 
— P: 


<P classe"heading"> ship to </p> lebte that we've alto gok an empty cl 
</> с Lin бе ight tom, to we tan jost put an 
<at> empty <P element here 
<div class=" tablenow"> 
> ane: </p> 
<p> <input type="text" names name" values </p> Ws 
<ai> € 


For the row containing juit the lab 
‘Ship to", we've added a class “heading” to 
the <p> so we can bold ths tent y 


AN the vows are 
(ж 


айу elass="tablenow"> 
‘<p> Address: </p> йе For the 
‘<p> <input typec"text" names'address" value=""> </p> ves and eath tell in à <p> 
erai» 


<div class="tablenow"> 

<p> city: </p> 

<p> <input type="text" namee"city" value=""> </p> 
</div> 
<div class="tableRow"> 

<p> state: </p> 

<p> <input type="text" names"atate” value=""> </p> 
чаш» 
<div class="tablenow"> 

<p> zip: </p> 

<p> <input type="text" namem"zip" valu 
чаш» 
<div class="tableRow"> 

<p> Phone: </p> 

<p> <input types"tel" name="phone” values*"» </p> 
</div> 
<div class="tableRow"> 

<p> Customer Comments: </p> 

<p> 


ч» 
— ded fer the last тө» ve ot 
yell the lef com, 
epo e morty 


m муры 
rows fps aan et tam we an ee] «p 
= element for that. 


pame="comments" rows="10" cols="45"></textarea> 


<p> <input type="submit" valu 
</div> 
</form> 
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styling the form 


Styling the form with CSS 


We've got all the structure we need, so now we just need to add a few styling rules 
and we'll be done. Because this form is part of the Starbuzz site, we're going to 
теше some of the style in the "starbuzz csi stylesheet, and create a new stylesheet, 

“syledorm.ess”, to add new style rules for the Bean Machine form. All of this CSS. 
should be familiar to you now, We're not using any rules unique to farms; i's ай 
just the same ми you've been using in the last few chapters. 


owl dss CSS in the le “sere in the fer “нег аш -— 
Were ge о lyon De Saba ЕЕ for same ol 
Merlot ele adda Ue аж dage- 
m e a marg le ¢ bod 
i sed à cy " 
— 
тайа: dope 


feSd0 url (images/background.gif) top left; 


Й 
Weve uiing the form do represent. the 
fom { {able nthe table dala. 
display: table; 
елы онен ad habe rag be rm ed 
3 Sd elec, ad ee tdr h 
аач ын бө Ehe background 
form textarea ( Were making the бедән Contra inthe 
width: Score, Form bigger to there's more room For 
Taighe: 200px ere W la ir ай ard M 
, 
ty tabtenow ( bad leder <div> cb ata vew in 
display: table-row; de table doro ayant 
, 
Eath <> деме that is nested а “table 
ere enter A o rea Ll le bly у Be ent 
+ her im cath > so the content in eath row ines vp at 
qu e the tap of the telle Ard weve adda a C ck 
p ee Padding here ton, $o add spice bebe the vows 
Р di "———————— be ser 
se bene rte EY e ыш eade Чаш ara Ti сат. 
y esie cuis the ed qp decent m eath те is ld to De vh o 
ey aeg ap ecl agit the ght ade of De Colm 
d d And f демен» with the Class "heading", we bole 
e essay Ма fer any «p des with the dis “head ve ЫШ the 
MEL ў artet ne erer al 
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html forms 


Test drive the styled form = 


Youre going to add tv «Ыл» elements to the <head> of 
HTM ede king inthe tarry 47 If or sank leet we NTML 


Chapter 12, "айо. сн", and your new sylesheet, eden s" ess kl a bit, see . 
Мар ишу ge cans t йи marce clas Can add the Пах header ed 
then the "ayledform css". Once you've got the two stylesheets linked, echar be the Bean Machine vate 
Save and reload your page. You should see the az led version ard nk (he Bean Machine ld 
ofthe Sah Bean Machine in your browse ry nce wth hse det. 
Wows wt ice ai е males! 

“The Bean Machine form now тада 

Eel af be Starbuzz sike better: 


“The label are 
Bape wth the 
rs De frm 
pee 
erede to 
egt км 
W. -l 
eee to 
Ж wih bl 
lo wth whch 
pec 


The spate between 
De rou makes a 
big difference and 
wakes the Form 

muth easier to read 


We've got two cd and all the content in the vows lines up nicely! 
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forms and accessibility 


A word about accessibility а treated à complete vds 


s Я е of the Bean Machine with labels, 
So far we've been labeling our form elements with simple text, but we should ресоре 


really be using the <Label> element to mark up these labels, The <Label> al tate cin 
ard accessform ess nthe tode 


element provides farther information about the structure of your page, allows 


bau 1o style your labels using CSS more easily and helps screen readers for the A 
visually impaired o correctly identify form clemens, donb 
To we a Аы element, first add an 
id abbr b your form clement 
<input type="radio" names hotornot" valuem"hot" |ide"hot"> 
abel for="hot">hove/label> 9 hot 
O not ® 
<input types"radio" names hotoihot" valuem"not" id="not"> 


„ tA, | Then add a А and ack te K.. Ne the tent nent L. these 


attribute to the corresponding id "ава ыйы а label 


By default, labels don't Look any different from just normal text. However, they can 
make a big difference when it comes to accessibility: You сап use the «125215 element 
with any form control, so we can add a label to each part of our Bean Machine form 

For instance, we could add a label to the number input for the number of hags like thi: 


. of bags:</labe1> 
<input types number" ide"bags" names bags" mine"l" max="10"> 


rane and id 

Wie added the id va к; Cas to tare be ra 

1 эма ме the sane value, in 
фа ese, ba 


When you add labels o radio or checkbox controli, remember that the id of each. 
control needs to be unique, even though the name of ай the controls in а group is the 
same. So, to add labels to the “beantype" radio control in the Bean Machine, create 
‘unique ids for both the whole and ground options: 


The name of both cee "beantype", so Biv ach id neds do be wipe 


fey are red teeter when or boit 
the form tothe ebe sent T pod 


<input types "radio" ide'whole beantype" nane="beantype" values"whole"> 
label fore "whole peantypa'>iiole beane/label>che> 
<input types'radio" ide'ground beantype" nane="beantype" valuee'ground" checked» 
label form "ground beantypa'»i:cunie/label» 
lobe that a label can tome before or after the control 
Menit ied li, a lorg ss the wae of he lor айныб 
ташка thei, l doesnt matter where the label is 
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What more could possibly go into а form? 


We've covered just about everything you'll regularly use in your forms, but there are 
a few more items you might want to consider adding to your orm répertoire. We're 
including them here just in case you want to take your own form studies even further. 


Isets and legends 


your forms start geting large, it can be helpful to visually group 
elements together, While you might use <d1v>s and CSS to do this, 
HTML also provides a <fLe1dset> element that can be used to 
group together common elements. <Е1е1ве:> makes use of a second 
clement, called <Legend>. Here's how they work together 


The ФАБ element srromdtà Tu deeds provides a 


set of inp. pa label for the group 


<tieldset> 2 
legend»Condimentec/ Legend». 
‘<input type="checkbox" namee'spice" values"salt"> 
Salt <br> 
<input types"checkbox" namem"spice" value="pepper"> 
Pepper <br> 
<input type="checkbox" namee'spice" valua="garlie"> 
</tieldset> 


Passwords 

The password «input» element works just like the text <input» ZT 
clement, except that the text you type is masked, This ìs useful 

for forms that require you to type in a password, a secret code, or 
other sensitive information that you may not want other people to 

see as you type. Keep in mind, however, that the form data is mot 

sent from the browser to the server seript in a secure way, unless 

you make it secure. For more on security contact your hosting 
company 


The 


<input type="password" names"secret» 
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html forms 


Here's how the дч 
and legend look in one 
broser. Vel find 
that browsers display 
them differently 


sword <input» element works 
M өгө le the tert cope» element 
except the tent you type 


masked 
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More things that can go in a form 
File input 


Here's а whole new input element we haven't talked about, I EE 
you need to send an entire Ше to a server script, you'll ance 


фике бе <input elemen br dise tit уре ie (Browse... 


you do that, the <input element creates а control that 


allows you to select a fle ad wien the orm i submited ihe Here's what the fle input 
Contents ol the Ше are sent with he rest ol your rm data to the element look Ше in a fe 
server Remember, your server script will need o be expecting a of different bees 


file upload, and also note that you must use the POST method to 
we this clement. 


To create a file ov element jat sek the 


<input types 


3 ne of the мр clement fle 


pw 


bi irt ап element, but rather a new way to use an element With не 3 [Buckaroo Banzai ] 
you already know If you add the Boolean апше по рле 1 bebe ya perfect Tommy: 
Your <select element, you - 

a multiple-choice шеш, Шасай of a popdovn menu, you'll gel n one phon eue, 


|New Jersey 


а multiple-choice menu that shows all the options on the screen b a ne 
a muliple-ch hat shows all the op h — 


(ith scroll bar if there are a lot of them); you can choose more 
than one by holding down the Ct (Windows) or Command 
(Mac) key as you select. 


<select namen"charactere" multiples - А add the attribute 


<option 'Buckarco'»Buckaroo Banzai</option> — "wire te tern a single 
<option Tommy Perfect Tommy</option> lon wem. into à multiple 
<option selection men 
<option 
<option John Parker"»John4/option» 

</select> 
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Placehol 
You can use the placeholder attribute with most of the «input: à 
types in а form to give the person who's filling out the form a > Mme: 
hint about the kind of content you expect him to enter into the 

control. For instance, if you have a text field that expects а first and HE yos leave фа field Мы a» 
last name, you can provide a sample first and last name using the У іти 
placeholder attribute. The value in the attribute is shown in the 
control, but i fainter than normal content that you add toa control, 
and as soon as you click into the text eld, the placeholder text will 
disappear so it doesn't get in the way of what you're typing. 


submit the form, the feed. 
Vert ie ebe ele the 
the tonic 


The placeholder attribute allows you 
AC te provide a hint abot the Kind 

oF онен yore expecting in the 
part of the Form 


<input type="text" placeholdere"Buckaroo Banzai"> 


Required 
Тыз an attribute you can use with any form control; it indicates матах Ее 
thata Ве is required, so you shouldn't submi the orm without m 
Specifying а value or he controls that have hatte set. i г pm 
brouser thar support tkis bue, f you try o айий the form IT 
Without specifying a value fora requi red field, yov ger an eror is a streenhot from Chrome At 


тешәр: andthe orm wl not be lel othe ever oF а writing rok all Brower support 
retired, brt үш tn p 


Notice tha his atti is another Bion atte, lt we aw in reed, but there / 
.. ̃ööM . ̃ Yor be able bab the frm, bet Ehen 
is simply “there” or "not there." That is, if the attribute's there, den of couse, the server serie wll complain 
its sel, and if the attribute's not there, then it's not set. So in this ‘that You haven't Filled in the Field 
example, requi red i there, о that means the attribute eset and 

Фе fed enue ta mbt the bem 


required is à Boolean attribute, so if is in 
the form control, that means the field must 
have a vale for the Form to ме torret 


<input type="text" placeboldere"huckaroo Banzai" required» ¢ J 


Edit your "stylediorm hmi" fle and add placeholders to each of the text <input>s and the tel <ingul>. Choose 
Values that wil give the customer a good hint about what kind of content is expected in each field. 

Next, edit the same flo and add the required atributo to ach form field that is required by the Starbuzz Bean 
Machine (all he “Ship to" fields). Because beans and beantype have default values, do you really need required 
(on those fields? What happens if you remove the checked aliribute fram beanlype; do you need required thon? 
Experiment with diferent browsers and see which browsers support placeholder and required, 
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qam POINTS 


The dorm» element defines the form, and all form 
input elements are nested inside i 

. The action attribute contains the URL of he 
server script. 

= The method attribute contains the method of 
sending the om data: ether POST or GET. 

= APOST packages fom data and sende it as part 
ofthe request. 

= A GET packages form data and appends ito the 
URL 

= Use POST when ће form data should be private, 
or when itis large, such as when а <textarea> or. 
fie «input» element is used. 

= Use GET for requests that might be bookmarked, 

‘© The <input element can act as many different 
input controls on the web page, depending onthe 
value ofits "уре" attribute. 

= дуре of text creates a arge ine text input. 

= Ауре of submit” creates a submit button, 

= дуре of radio" creates one rado bution. Al radio 
‘butions with the same name make up a group of 
mutually exclusive buttons. 

= Atype of ‘checkbox’ creates one checkbox 
contol. You can create a set of choices by giving 
multiple checkboxes the same name. 

= Ауре of number creates a ange ine text input 
that expects numeric characters only. 

= Ауре of range" creates a slider control for 
numeric input 

= Acolo type creates a color picker in browsers 
that support this type (and a text input otherwise). 

= Adate” type creates a date picker in browsers 
that support this type (and a text input otherwise). 


The emai, uf. and te types create single- 
ге text inputs that cause custom keyboards to 
appear on some mobile browsers for easier data 
өшү. 

‘Astextarea> element creates a тийе text input 


A «selech element creates a menu, which 
‘contains one or more «option» elements. 
<option? elements define the tems in the menu. 


Ifyou put text into the content ofa <textarea> 
element, it wil become the default text in a text 
area control on the web page. 


The value attribute in the text <nput> element can 
be used to give а singe-ine text input an inital 
value 


ойто the value attribute on а submit button 
changes the text of he bution. 


When a web form is submitted, the form dala 
values are paired wih their corresponding names, 
and ali names and values are sent to he sever. 


CSS table display в often used to lay out forms, 
given that отп have a tabular structure. CSS 
сап also be used to style the form’ color, font 
styles, borders, and more. 


HTML allows fom elements to be organized with 
Же <feldset> element. 


The cabe element can be used to attach labels 
^o form elements in a way that aids accessibility. 


Use the placeholder attribute to give the form user 
‘aint about he kind of content you expect ina 
ei 


The required tribue indicates a field is required 
forthe form to be submited correcty. Some 
browsers will force you to enter data into these 
fields before submiting the fom. 


html forms 


EA Markup Magnets Solution 
= 


Your job was to take the form element magnets and lay them on 
top ofthe corresponding , in the sketch. You didn't need 
all the magnets below to complete the job; some were left over. 


Heres our solution. 


We didn't 
need these 
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exercise 


BE the Browser Seſufion 


name = “Buckaroo Banzai” 
zip = 0097 

model = “convertible” 
color = “ніна? 


caroptions[] = fe, 


four pencil 
ч" à ‘om GET or POST 


For each description, circle either GET or POST 
depending on which method would be more. 
appropriate. f you think it could be either, circle 
both. But be prepared to defend your answers. 


GET A fic fe pig in алана въ e 


GET GOST orn for ordering CDs 
(GE POST n fir toting up current cents 
0 
OS 
FOS) 


GET BOSD 4 form to post book reviews 


GET COSY аһа benefits by your government ID number 


GET A form to send customer feedback 
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Hey, 80% of our customers 
order ground beans. Can you 
‘make it so the ground bean type 
is already selected when the 
user loads the page? 


Ifyou add an attribute called checked with а value of "checked" 
into your radio input element, then that element will be 
selected by default when the form is displayed by the browser 
Add the checked attribute to the"ground" radio <input> 
element and give the page atest. Here's the solution Here's just the relevant setion 


oF the Ferm in "Frm bbl 
<form actions "http: //starbuszcoffee. coa/processorder php" mathods"POST"> 


rps: de» 
<input type="radio" namee'beantype" valu iab چ‎ dins 
input typer п 
bd And heres the new Ње Л 
that selects the frond , 
Sees vadio botten 
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Wouldn't it be dreamy if this 
were the end of the book? Tf there 
were no bullet points or puzzles or 
HTML listings or anything else? But 
‘that's probably just a fantasy. 


Congratulations! 
Jou made it to the end. 


OF course, there's still an appendix. 
And the index. 

And the colophon. 

And then there's the website... 


‘There's no escape, really. 
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* The Top Ten Topics y 
(We Didn't Cover) 


We covered a lot of ground, and you're almost finished 
with this book. Well miss you, but before we let you go, we wouldn't fool 
right about sending you out into the world without а litle more preparation. We 
can't possibly ft everything youll need to know into this relatively short chapter. 
‘Actually, we did originally include everything you need to know about HTML and 
CSS (not already covered by the other chapters) by reducing the type point size 
0.00004. Ital fl, but nobody could read f. So, we threw most of it away, and 
kept the best bits fr this Top Ten appendix. 
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*1 More CSS selectors 


While you've already learned the most common selectors, here are а few 
‘more you might want to know about. 


Pseudo-elements 


You know all about pseudo-classes, and pseudo-clements are similar. 
Taeudo-clements сап be used to select parts of an element that you can't 
conveniently wrap in а «div» or a <apan> or select in other ways. For 
example, the ti 


Letter pieudo-clement can be used to select the first 
Jeter of the text in a block element, allowing you to create effets like initial 
caps and drop caps. You can use the strat 13де peeudo-element to select 
the first line of a paragraph. Here's how you'd use both to select the first 
Jeter and line of a <p> clement: 


pifirst-line ( <: 


lere weve making he first 
font-style: italie; k , 


lekker of te paragraph arge, 
and the First line abe 


Attribute selectors 


Attribute selectors are exactly what they sound like: selectors that 
allow you to select cker 
Tike this: 


ents based оп attribute values, You we them. 


Ths selector selects all 


Ф Ў оа tha have a width 


ibe in ther HTML- 

ing [width] ( border: black thin solid; | 

imglheightel30D"] { border: zed thin solid: | ЖС, 

Amage(alt~e'#lowers"} ( border: Ваве thin solid; ) Tis selector шы alae 

^ that have a height attribute 

This ebe setis all image SM she P305 
‘that have an alt stir 

edes the werd “fone 
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Selecting by siblings 


You can also select elements based on their preceding sibling For example, say you want to select 
only paragraphs that have an <h1> clement preceding them, then you'd use this selector 


Write the preceding деме}, a + (phat мур, 
and then the abn element. 


а КОС Toe selector selects al paragraphs that 
font-style: italie: tone mediately after an ch» element 
‚ 
Combining selectors 


You've already seen examples of how selectors can be combined in this book. F 
сап take a class elector and use it as part of а descendant selector, like this 


blueberry p ( color: purple 


ert wee sing al prine 


l sre deters ofan denk 


in the Burberry elass 


There's а pattern here that you can use to construct quite complex selectors, Let's step through 
how this pattern works: " pum 


и by defining the context for the element you want to select, like dis 


— Mee wre ing a deena eter 
— > blockquote е фе with d “rent” mast 
be the parent of the bel dete 


Ө Then supply the clement you want w select: 


Nent, we add the <p> element as the element 
Le we want to select in the context of be 
„ dees The <p> element mast be a 
ретт рЫ Чемен of абаро, which mat be à 
x hild of a <div> with an id of "greentea". 


eaten > blockquote p, 


1 


divigreentes > blockquote pifirst-line { font-style: italie; ) 
— — — 
d i ements First-line, be 
# тм\ we add a Feser, 
wet ее of bhe paragraph 

That's a pite comple selector! Feel че өнү Ahe Fra ire of Бе ra 
free to contre Your own tetra 
vang ба ame meted 
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properties on the cutting edge 


#2 Vendor-specifie CSS properties 


"The browser makers (in other words, vendors like Microsoft, Mozilla, the 
{alls behind WebKit, and so оп) ойеһ add new functionality to their 
browsers о test new features, orto implement CSS extensions that are 
being considered, but aren't yet approved by the standards bodies. In these 
cases, vendors create CSS properties that look like this: 


Stark with a dash 


\ 


-moz “transform 


rather da" 


y ^y 
The vendor identifier here, 
Яз "nee! for Mozilla The property 


You should feel free to make use of these vendor specie properties, but 
they aren't necessarily intended for use in shipping products the property 
may never be approved as а legit standard, or the vendor may change the 
implementation of the property at any time. That said, many of us need to 
be able to ereate pages that use the latest and greatest technology, but do o 
knowing that youre using properties that may change. 


If you're going to make use of these properties, then often you'll create CSS 
that looks ike this 


Farsk, we lk he general property 
poled, or gets 
in the future 


diva supported 


transform: rotate (45deg) ; 
-webkit-tranaform: rotate(45deg) :“ Safari Oe 


-mor-transform: rotate (45deg) ;4— — Mozilla I Then we list the 
-o-transform: rotate(4Sdeg) ; < Opera Еты 
р transform: rotate (dsc, |p 


Yon can typically find these vendor-specific properties in the developer 
documentation and release notes for ea 


А browser or by participating in the 
forums asociated with each browser's development process 


And, if you're wondering what the transform property really does, cheek out 
the “#3 CSS transforms and transitions” section оп the nest page. 
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#3 CSS transforms and transitions 


Using CSS, you can now до full-blown 2D and 3D transformations on 
elements, Rather than talk about ít let's look at an example (type this 
onc în; i's worth i) 


<!doctype html> 
<html> 
<head> 
<meta charset="ute-B°> 


<titiescss Transforms and Transitions</title> 

<style> Here's the basie cile for 

вох d the bow <d> below 
Porition: absolute; 


Ert t KC Tye ule de roit jor gad e 


with us all through that роботту chapter?) 
left: 100px; ith vs all through that: pe 3 chap 
width: 200px; 


find let's give the <div> a position and size. 
height: 200px; 
background-color: red; and make it ved 


» ть syle vde applies ONLY if the доа 
dbox:hover ( b hove sz. je үө tan over over 
transform; rotate(45deg); «алон too! 
. rotata (ida > 


When you're hovering your коше over the 


7 -nos-transform: rotate (ASdeg) ; <i, we transform the element by vela 
al a tating 
m -o-tranaform: rotate(4Sdeg) ; t 45 degree 
-ns-tranaform: rotate(4Sdeg) ; 
€ MISES sb need brewer-spetificexbennons for these 
</style> 
p 
oap. 


МУ Here's the «фе were 


<div ide bosse [divo 
</body> 
pe 


rale 


Go ahead and type this in and then give it a test drive 

When you pass our mouse over the "box" <div>, you 

should see it transform so that it is rotated by 45 degrees. > 
Now, what if we want to make that transformation 

smooth with a nice animation? ‘That's where transitions 


Mowe ger the cdi 
come m. ло turn the page. tmi 
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ess transitions 2nd transforms 


. propery tothe "ba <div> rd fo hae 
bene to new inc gre psec Herc aw wed бис 
mor 1 
position: abselute; 
top: 10р; 
left: 100px; ты transition property шүк "IF the valee of the transform 
widen: 200px property changes, ronem from the turent vue of transform 
height: 200px: Г КЫ ale анн on the чиедей duration 
background-color! red, 
55 
F 


The default valve of transform it 
thing Bak iy Dere i vo transform 


Bet shen yo hve prone er 
ИШИ te eae fries 
sg dye aon Se 

: ibe otn fon reir len 

. 

-mor-transform: rotate (45deg) ; AS-degree rotation transform happens 

555 реони 

— een: 


П 


IE ттеу (as of 
version has vo et 
for transition bot may 
in version О Se 

won't see the animation, 


‘The value of the transit ion property is another property, in this case 
‘transform, and a duration, in this case two seconds. When the value of 
the specified property changes, the transition causes that change to happen. 


‘over the specified duration, which creates an animation effect, You ean 


transom other CSS properties too, Ше with or ора! су. SF ye wing [E 
O S z D = z 
mu I —. 


Teo setonds 
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#4 Interactivity 


HTML pages don’t have to be passive documents; they ean also have content that is . 
Executable content gives your pages behavior. You create executable content by writing 


programs or scripts using a scripting language called JavaScript. Here's a Шйе taste of what it 
‘means to put executable content into your pages, 


Here's a new HTML element, cer fte which 


We've wing the id of the farm 
deep ШО alona you to plaze tode right inside of HTML- 


te sek a hodie to the farm in 


JandSeript to we tan de things with 
window onload = init; th Ike define what happens when a 
function init() { belio is clicked 


var subaitButton = document.getElenentByld("subaitButton") + 
subnitButton.onclick = validRid; 


uw Ма here's a bit ef JavaStript that 
function validBid() ( 


hetkes à user's bid to make sue £s 
if (document.getElementByld("bid").value > 0) { ngt zero dollars or less 
document. getElenentById "theForn") submit () ; 


IF the bid в greater than O, we 
submit the form: otherwise, we don't 
betae ts an error. 

П 


</script> 


Then in HTML, you an treste a form that wes this strip to chetk the bid before the 
form i submitted |F the bid в wore than zero, the form gets submitted 
<form ide"theForm" method="post” action="contest-php"> 
<input types"munber” ide"bid" value="0"><br> 


<input type="button" ide"submitButton" value 
</form> 


niat "><br> 


In JavaScript, we can define what happens wher 
Be sabnitBuidon и бей, and get he wee of 
the mpl wth eid of Sha 


What else can scripting do? 


Form input validation, like we did above, i common and useful task that is often done with 
JavaScript (and the types of validation you can do go far beyond this example). But that's just 


the beginning of what you can do with JavaScripts you'll see on the next page 
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5 HTML5 APIs and web apps 


In addition to the elements that HTMLS adds, HTMLS 
comes with a whole new set of application programming 
interfaces (APIs for short) that are accessible through JavaScript 
These APIs open up a whole new universe of expresion and 
functionality to your web pages. Lets lok at just a few things you 
might do with them, 


With HTMLS АРА and JavaScript you can 
create a 20 drawable surface rightin your 


pager no plugins required ү 


Make your pages location 


aware to know where 
your users are, show them 
Whats nearby, ake them 
on a scavenger hunt, give 
them directions to bring 
people with common 

interests together n the 


t 


Integrate your pages with 

+— Google Maps and even 
let your users track their 
movement in real time 


Interact with your pages in new ways that 
work for the desktop and mobile devices 


x” + 


X ^* 


E 


Use web workers to turbo charge your JavaSeript. 
code and do some serious computation or make your 
арр more responsive You can even make better use of 
your users multicore processor! 


— 2 — — 


bring that data back to your 
app, in near real time. 


Cache data locally using 
browser storage to speed 
up mobile apps 


No need for special 
Plogins to play video. 


Create your own video 
playback controls 


using HTML and 


JavaScript 


leftovers 


Make use of browser- 
based local storage. 


Store lots of preferences and data 
for your users locally, in the browser, 


and even make it available for offine 


— 


The browsers clearly not just for 


gf baring documents anymore. With 


JavaScript, you can draw piel 
directly into the browser, 


supercharge your 
forms with Javascript 
to provide real Buld complete video 

interactivity am 


video in new ways. 


Use the power of javascript to 
Чо ful blown video processing 
in your browser Create special 
effects and even directiy 
manipulate video pixels 


Motivated yet? 
You'll find all these 
examples in our book 
Head First НТМІ5 
Programming. 
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*6 More on Web Fonts 


We would have Шей to have spent а lot more time on Web Fonts, so they ended up 
‘making our "10 things we didn't cover,” even though we did cover them. If you're 
using Web Fons, there аге a few more things you should know and investigate, so 
we ve put together a top 10 of things you should know about Web Fonts: 


1 There are services that help take the pain out of using Web Fonts, ike Google 
Web Fonts (http: //uwu.oogle. con/webtont s), Fonts.com (http://www 
fante.con/wab-fonts), and Extensis (гєр: / / ным extensis..can/), 


Browsers behave differently while they download your fonts. Some browsers 
display а backup font, while others wait for the font to be downloaded before 
rendering the text. 


3. Once you've downloaded a font, itis cached by your browser and not retrieved 
again the next time you encounter a page that uses it. 


d. All modern browsers (IE94) support the Web Open Font Format (WOI 
‘whieh is likely to become the Web Font standard, However, Internet Explorer 
up through version supports а font standard dilferent from all other modern 
browsers (eor), and has a bug that prevents the browser from loading multiple 
fonts (so you can't just list more than one font in your @ font-face rule). If you 
need to support Web Fonts on ШЕЙ and earlier, the services mentioned above 
сап insulate you from having to worry about these cross-browser compatibility 


5 There are many free fonts ош there. Look for "open source fonts” to find fonts 
уоп can include in your web page for free. 

6. Because Web Fonts are real fonts, you can apply any styling to them just like 
you сап to conventional fants, 

7, Using Web Fonts can have some impact on the performance of your 
page, but is considered a better practice and will typically provide beter 
performance than using custom graphic images for typography. 

u. Limit the fonts in your @fant-face rule to only the fonts used on a 
particular page 

9. ME you have existing font licenses, check with your vendor; they may 
allow web usage: 

10, As with conventional fonts, always include а fallback font in case your 


page's font isn't available or an error is encountered retrieving ur 
decoding it. 
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+7 Tools for creating web pages 


Now that you know HTML and CSS, you're in a good position to decide if tool like 
Dreamweaver, Expression Web, ог Coda are for you. Some of these applications give you much. 
richer editors with features like code coloring and buil-in preview to make creating and editing 
your HTML and CSS easier Some of these applications provide what-you-see-isachat-you- 
get (WYSIWYG) tools for creating web pages; we're sure you know enough about HTML and 
browser support to know that this goal, while worthwhile, also comes up short from time to 
time. But that said, these tools also provide some very handy features, even if you're writing a 
lot of the HTML yourself: 


© A “code” window for entering HTML and CSS with syntax checking to catch 
‘common mistakes and suggest common names and attributes as you type 

‘© A preview-and-publih functionality that allows you to test pages before making 
them "live" on the Web, 

‘© A site manager that allows you to organize your site, and also keeps your local 
changes in synch with your website on the server. Nate that this usually takes care of 
all the FTP work for you. 


‘© Some provide built-in validation, so you know your page is valid as you develop it 


"These tools are also not without their downsides: 


= Sometimes these tools lag behind standards in terms of support, 
жоло keep your HTML and CSS current, you may need to write 
(or edit) the HTML yourself. 


* Not all of these tools enforce strict standards, and may allow 


you to get sloppy with your HTML and CSS, so don't forget to 
validate ifthe tool doesn't provide built-in validation. 


Keep in mind that you can use a combination of simple editors along with these 
nore sophisticated tools; one solution doesn't have to fit all your needs. So use а 
Page creation tool when it makes sense. 


Some tools to consider 


Dreamweaver (Adobe) 
Hype (Tumuli) 

Coda (Panic) 

Microsoft Expression Web 
Flux (The Escapers 
Amaya (Open source, developed by the WSC) 
Eclipse (bythe 


E Ti bled nd ушы» veb а 


aas in Йө se be sure bo cheek de 
For all бе options for ы. "e 


clipse Foundation) 
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what can you do with xhtml? 


#8 XITMLS 


We were pretty tough on XHTML in this book, with the whole 
“KHTML is over” thing, The truth i, when it comes to XHTML, itis 
only XHTML 2 and later that has died, and in fact, you can write your 
HTML using XHTML style if you want to. Why would you want 

to? Well you might need to validate or transform your documents as 
XML, or you might want to support XML technologies, ike SVG (you'll 
probably know if yon do), that work with HTML. 


Let's look at a simple XHTML document and then step through the high 
Pints (we couldn't possibly cover everything you need to know on this 
topic; as with all things XML. it gets complicated fast) 


] 
<'аосв " e ine doctype! 

5 This is XML; we need to add what is 
<html aminse"http: //viv.w3.org/1999 xhtml"? U bye isa aceite 

<head> 


<title>You Rock!</title> ere 
Ў All elements have to be extremely well formed note the, 
<meta aner- or- /> N, hyay /> here bo clore this vid element. Thats XML's 


</head> Format for боша void tag 
<body> A an example, we've wing 
2 " SVG to draw a restarle 
4pm kinda Liking this xHTML!</p> 
into өм page The detail 
ача хадлан: / www. w3.org/2000/sug*» m~ pen. 


arent importants what is 
important # this ix 
an XML format that nes 


«rect strokes "black" fille"blue" x="4Spx" y="4Spx" 
widthe"200px” height="100px" stroke-width="2" /> 


Baud К. inside XML, not HTML- 
</body> We can embed XML right in the 
<em> pagel Kinda tod. 
Now here's а few things you nerd to consider for your XHTML pages: Closing all your elements, quotes 


акон attribute values, valid nesting 
* Your page must be wellformed XML. persis pen 


* Your page should be served with the application aan 
MIME type; for this, you'll need to make sure your server is serving 


this type either read up on this ог contact your server administrator 


. Make sure to include the XHTML namespace in your «nta» 
clement (whieh we've done above 


Like we said, with XML there's a lot more ta know and lots of things to 


watch out for And, as always with XML, may the foree be with you 
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*9 Server-side scripting 


Many web pages are generated by applications running on a server For example, think about 
an online order system where а server i generating pages as you step through the order process, 
or an online forum, where there's а server generating pages based on forum messages that are 
stored in a database somewhere, We used a server application to process the form you created. 
in Chapter 14 for the Starbuzz Bean Machine 


Many hosting companies will let you create your own server applications by writing server-side 
scripts and programs. Here's a few things server-side scripting will allow you to do: 


‘Build an online моге complete with products, a shopping cart, and an order system. 
‘Personalize your pages for each user based on his or her preferences 

Deliver up-to-date news, events, and information 

= Allow users to search your site. 

= Allow users to help build the content of your site. 


"To create server applications, you'll need to know a server-side seripting or programming 
language. There are a lot of competing languages for web development, and you're likely to get 
differing opinions on which language is best depending on who you ask. In fact, web languages 
are a liile like automobiles: you can drive anything from a Prius to a Hummer, and each has its 
own strengths and weaknesses (cost, case of ue, size, economy and so on) 


Web languages are constantly evolving: PHP, Python, Pest, Node js, Ruby on Rails, and 
JavaServer Pages (JSP are all commonly used. IF you're new to programming, PHP may be 
‘the easiest language to start with, and there аге millions of PHP-driven web pages, so you'd 
be їп good company If you have some programming experience, you may want to try JSI 

ог Python. f you're mare aligned with the Microsoft technologies, then you'll want to look at 
VB.NET and ASPNET as a server-side solution, And, if JavaScript is your gig, then check out 
Nodejs far a whole new approach. 
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*10 Audio 


HTML gives you а standard way to play audio in your pages, without 
а plugin, with the <audio> clement. You'll find this element quite 
similar to the <video> element: 


<audio sre="song.mp3" ide"boonbox" controle» 
Sorry but audio is not supported in your browser: 
</audio> 


Also Ше video, each browser implements is own look and feel for 
player controls (which typically consist of a progress ar with play 


pause, and volume control 


jadiy like video, there is no standard encoding for audio. Three 
formats are popular: МРЗ, WAV, and Ogg Vorbis. You'll find that 
support for these formats varies across the browser landscape (as 
of this writing, Chrome is the only browser that supports all three 
format 


Despite йз simple functionality the <audio> element and is 
JavaScript APL give you lots of control, Using the element with 
JavaScript, you can create interesting web experiences by hiding the 
controls and managing the audio playback in your code. And with 
HTMLS, you can now do this without the overhead of having to use 
land learn) а plugin ike Adobe Flash). 
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ее 


Lock Familiar? Yes, audio 


supports similar Functionality as 
video (nines the video, өөндү, 


" Inde * 


Symbols 


‘Samp abbreviation, 112-113 
& (ampersand) for entities, 113 

ande for comments in CSS, 285 
<! and — for comments in HTML, 6 


<>(angle brackets), 2: 


<code> element, 114 


(colon) in GSS rules, 259 


(болда) syntax for paths, 61-65 


(double quotes) 
for parent folders, 65, 
<q> element and, 86-87 
Stck rule, 322-325 
/ forward slash) 

in closing tags 26 

for paths, 64-65, 
# (hash symbol) for id selectors, 395 
media rules (CSS), 401, 405 
(semicolon) in CSS rules, 239 


IIC ne brackets) in farm element names, 675 


А 


<a> elements 


changing styles of, 452-453 
creating links froma elements in HTMLS, 153 
creating links with, 48-49 
in lounge html 47 
states of, 466 

absolute layouts, 5 

absolute paths, 136-137, 145, 159 

absolute positioning, 504-510, 524-529, 536-537 

action attribute, 650-651, 661, 692 


active link state, 454 


ай attribute, 173, 211, 242 
angle brackets (< >), 25 
anti-aliasing text, 210 
Applications folder, 12 
application/xhtml+xml MIME type, 708 
‘<artile> clement, 562-564, 572-575, 595 
aside» element, 551,595 
ишле 

attribute selectors, 691 

of elements, 29, 51-53 

‘matching to elements, 52 

in opening tags, 36 
<audio> element, 710 


“auto” margins, 502 
autoplay attribute (<video>), 583, 584 


B 


backgrounds 
background-color property 618, 634 
background-image property, 380-504, 405 
‘background: postion property, 388, 405 
Dackground-repeat property, 343, 405, 
colors (weh pages). 206, 210 

block elements 
lowing, 473-478, 537 
planning pages with, 115 

<blockquote> elements, 90-95, 92 

<body> tags, 8, 23-24 

bold text, 335-336 

borders 
adding to <div> clement structure, 424-433 
border-bottom property, 265-266, 354 
border-collapse property, 616, 634 
border-color property, 387, 389 
border-radius property 388, 405, 411 
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borders, continued 
border-spacing (cell 634 
border-spacing property, 516, 616, 639 
border-style property, 
border-width property 387 
bottom, 265, 
box model and, 369-370, 377-379, 387 
displaying in browsers, 31 
shorthand for, 442-445 
specifying corners of 388 

bottom property, 304 

box model (CSS), 367-372 

<hr> elements, 96-99, 115 

broken images in browsers, 215 

browsers, web, See web browsers 


C 


<caption> element, 634 
captions (HTML tables), 609-610 
cd (change directory) command, 130 
cells, table, 684 
character encoding, 238-240 
character entities, 112-113, 115 
charset attribute (<meta> tags), 239, 249 
checkbox controls, 692 
checkbox «input» element, 653, 663, 673-674 
checked attribute (forms), 695 
Chrome, 16 
class attributes, 301 
classes 
adding elements o, 286-291 
class attributes, 392-397 
placing <div> elements into, 421 
clear property, 495-497, 537 
closing tags, 25 
coders, 589, 590-592 
collapsing borders, 616 


7 Index 


colors 
adding to HTML tables, 618-620 
background (web pages), 206, 210 
“color” type attribute, 692 
color <input> element (forms), 656 
Color Pickers, 206, 348-349 
color property (CSS), 262, 313 
of headings, changing, 439 
naming, 343 
web colors. See web colors 

colspan attribute, 624, 634 


CSS, 285 
HTML, 6 
container file format, 589 
content area (box model), 368, 371, 372, 405 
Coment Delivery Network (CDN), 591 
controls attribute (video), 584 
CSS (Cascading Style Sheets) 
box model, 367-372 
cascade, 458-463 
comments in, 285 
comparing languages with HTML, 2 
CSS Pocket Reference, 260, 445 
CSS table displays 
creating, 510-520 
laying out forms with, 682-685 
layouts, 522 
errors in, 297 
v» HTML, 34-35 
inheriting styles from parent elements, 281-285 
linking pages to external stylesheets, 273-277 
properties overview, 300 
rules, 36, 259-260, 301 
selectors, 696-699) 
<style> clement, 29-32, 261-263 
style definitions, 42 
styling forms with, 686-687 
styling upgrade project, 362-365 
transforms and transitions, 701-702 
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‘updating for НТМ elements, 554 
validating, 298-299 
vender-specii properties, 700 
cursive fonts 315 


D 


data transfers (hosting), 125 
“date” type attribute, 692 
date <input> clement (ort) 657, 671-672 
datetime attribute, 565-566 
default him files, 138-139, 159 
definition lists, 106, 
«del» element (HTML) 153 
descendant selectors, 437-439, 466 
dir command, 131 
directions, 54 
directories (folders), 130 
display: talle property, 516 
<div> clement (HTML) 
adding styles to, 124 433 
defined, 466 
dividing pages into sections with, 417-422 
line-height property and, 440 
new HTML elements and, 595 
tions, 225-227, 229-250, 249 
domain names, 126-128, 159 


doctype def 


Dreamweaver, 6 


E 


editors, text, 16 
elements 

adding to clases, 286-291 

basies, 25-26, 36 

defined, 25 

floating, 479-482, 487-490, 497, 525-529 

form, 652-657 

height of, 430 

linking to with IDs, 151 


multiple rules for, 
nesting, 107-109 
new in HTMLS, 547-550 


selecting by siblings, 699 
structure, 36 


styling based on state, 453-454 
clisichml, 54 
<em> element, 92, 114, 338 
email» element (forms), 663 
email <input> element (forms), 657 
Embedded OpenType fonts, 325 
еш units for sizing fonts, 329, 334 
encoding 

character, 238-240 

Formats (video), 306-3587 
entities, character, 112-114 
executable contentin web pages, 703 
external stylesheets, 273-277, 301 


F 


fantasy fonts, 315 
<fieldser> element, 689, 692 
files 
creating in Mae, 12-13 
creating in Windows, 14-15 
extensions, 15 
file <input element (forms), 690 
“fle://7" protocol, 145 
file protocol, 159 
‘organizing in folders, 56-59 
transferring to server root falder, 129-133 
Firefox, 16 
гаса psendo-class, 454 
distleter pseudo-clement, 698 
з 


first-line pseudo-clement, 
fixed position elements, 537 
fixed positioning, 506, 531-534, 536 
Flash video, 592 

floated elements, 537 
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floating laying out with CSS table display, 682-685 
elements, 525-529 multiple choice menus, 690 
oat property, 472, 478-482, 487-490 name attribute, 6 
inline elements, 497 placeholder attribute, 691 
layouts, 521, 525-526 required attribute, 691 
Howing block/inline elements, 473-478 server scripts, 646-647, 650-652, 660,663 
Bow of elements 537 styling with CSS, 686-687 


frozen layouts, 501-502, 537 
FIP (File Transfer Protocol), 129-132, 159 


focus pscudo-class, 453 


folders 
organizing fles/images in, 56-59 G 
for thumbnails, 192 

fonts (CSS) set «filename? command, 131 
changing weight ol, 335-336 GET method, 678-680, 692 
colors, background уз. font, 319 GIF image format, 167-168, 172,211 


families o, 355 
@font-face rule, 322-325 
font-family property, 279-280 


Google Web Fonts, 32: 
Guide, HTML, 245-246 


27, 706 


for Mac/Windows, 321 
properties, 312-313 
shorthand for, 444 

d <h1> clement (heading 
sizing, 328-334 55 


<h2> clement (subheading 
<head> element, 8, 23-24, 36. 
header? elements, 551, 568-971, 572-573, 595 


styling, 337-339 
Web Fonts, 325-327, 706 


footers 
«lotes? element (HTML), 351, 595 header images, 323-5: 
laying out, 493-496, 499 Head First HTMLA Programming, б, 52, 231, 598, 705 
formas Head First learning principles, xxviii 
image, 167 Head First Lounge project, 4-5 
video, 586-591 Head First Mobile Web, 403 
forms, HTML headings 


action atribute, 650, 661, 665, 692 changing color of 439 
adding checkhoxes/text area to, 673-674 Знов 

adding fieldsets/legends to, 689 

adding «input? elements to, 664-666, 671-675 
adding <label> clement for accessibility, 688 
adding password «input? element to, 689 
basies, 646-649 

commonly used elements, 652-657 

file <inpur> element, 690 

‘form element, 619-651, 660-663, 692 
GET vs. POST methods, 678-680 bang companies, 12 


height properties 
attribute, 174, 584 
CSS box model and, $66, 371 
‘of elements, 430 
propery, 570 
hex code (colors), 32, 343-347, 349, 355 
“Hide extensions for known fle types" option, 15 
159 
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hover state, 453-454 
href attribute 

basies interview), 53 

relative paths m. 59 

specifying link destination with, 48-51 
IMs 

APIs and web apps, 701-705 

browser support for, 333 

building blog with new elements, 562-569 

v HITMLA.01, 555-556 

new elements in, 546-550, 594, 595 

specification 

асуре, 227 
‘overview, 231, 

HTML (Hypertext Markup Language) 

basies, 4 

comments, 6 

creating tables with, See tables, HTML 

creating web page, 9-11, 17-22 

v. CSS, 31-35 

forms. See forms, HTML. 

guidelines for well-formed pages, 24: 

Guide to, 245-246 

han extension, 14 

“<html> tag 6,23 

HTML & XHTML: The Definitive Guide (O'Reilly). 

52 

incorporating CSS into, 259-260 

language vs CSS, 294-2 

legacy elements, 247 

living standard, 224 

marking up page structure, 38-41 


5-216 


overview, 2-3 
readability of, 6 
saving, 18 


structure for table displays, 512-514 
structuring text with tags, 21-23 
version history of, 222-225 
HTTP (HyperText Transfer Protocol), 135, 159 
hypertext links, See links 
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id attribute, 150-155, 392-897, 405, 418 
“Ignore rich text commands in HTML fles" option, 13 
images 

adding logo to myPod application, 202-209 

broken images ín browsers, 215 

browser handling of, 164-166 

fixing broken, 66-68 

formats, 167, 211 

<img> element, 55, 170-172, 381 

<img> elements, 211 


organizing in folders, 57-58 
quality of, 187 
sizing/resizing, 174, 170, 183-184 
using as list markers, 632-633 
important, 459, 461 
indes him fle, 11, 18, 138-139, 159, 176 
inherited properties, 301, 464 
inheriting styles, 281-285 
inline elements 
basics, 94-95 
loving, 473-478, 537 
<q> and <em>, 115 
setting properties on, 450 
input» elements (forms), 652-653, 656-637, 661-667. 
670-074 
<ins> element, 353 


Internet Explorer, 16 
italie style тез, 337-339 


J 


JavaScript, 703 
jello layouts, 502-503, 521, 537 
JPEG images, 167-168, 172, 211 
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keywords far sizing fonts, 330, 334 beuge enl, 54,66 
labes MacOSX 

«label» cements, Gi, 692 creating HTML fles in, 12-13 

labeling <div> with id tribue 418 FTP applications for, 132 

Tink, 148 specifying fonus for, 321 
das pudo cles, 454 margins 
layouts, CSS, 521-523 box model and, 369, 371-372, 377-379 
leading (text), 366 тапта propery, 385 


settings for, 405 
shorthand for, 442-445 

markers, la. 631-632 

matching tags 25 

matte color, setting, 206-207 


eft property, 504 
legacy HTML elements, 247 
legend» element, 689 

<li> elements, 101-106 

lighter font-weight property, 385 


Mane option 
finchreals, 95 in Photoshop Elements 210 
line-height property, 365-366, 405, 440 in “Save for Web" dialog box, 205 
lik» clement, 275-277, 301 maxdevicc-widih property 400, 404, 412 
шь тазы property 401, 412 

adding ides to, 147-149 media rules (CSS), 401 

‘Head First Lounge example, 4-50 media attribute, 400. 


Яик pelo clam, 455 
linking into parent fers, 63-65 
Taking into subfolders, 60. 
linking to neve windows, 185-157 wessen xxix xeti 
linking to point in pags, 148-152 method tbe (forms, 630, 692 
linking within pages, 138 MIME ype 590 
link labels, 148 min-device-widih property 400, 404, 412 
wiener s min-width property, 404, 412 
ote vote Ема mismatching tay, 109-110 

d wilehî page, 3$ 


turning thumbnails into, 196-200 
liquid layouts, 501-502, 537 mkdir (make directory) command, 131 


media queries, 401-402 
“<meta tags, 239-240, 249 


monospace fonts, 315 


lists 
. MP4 containers, 586-587 
liststyle-postion property, 633 multiple attribute forms), 690 
list-style-type property 631 multiple classes, 291 

H6 index 
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тишле custom fonts, 327 
multiple links ta stylesheets, 463 

multiple stylesheets, 399-400 

myPod application (images 175-177, 188-191 


N 


name attribute (form clement), 662-663 
naming 
clases/ids, 397 
colors, 343 
<nav> element (HTMLS), 575-577, 395 
navigating multiple pages, 573-577 
negative property values, 333-534 
nesting 
<div> elements, 420, 466 
elements, 107-109 
[m 
nested tags, 26 
tables, 634 
normal keyword, 445 
Notepad, 14 
snth-child pseudo-tlass, 619, 634 
“number” type attribute, 692 
number «input» element (forms) 656, 671-672 


0 


oblique style text, 337-339 
Ogg container, 586-587 
<ol> element, 103-106 
online color charts, 349 
“Open and Save” tab, 13 
opening tags, 25 
OpenType fons, 


Opera, 16 
<орйоп> element (forms), 635, 663, 666, 692 
ordered lists, 102-105, 115, 633 

orientation property, 400 

overriding style inheritance, 204-285 


Р 


<p> elements, 55, 101 
per 
padding 
basics, 405 
ox model and, 368, 371-372, 377-379 
padding-left property, 384 
Shorthand for 42-45 
paragraphs 
лаар 55 
sting independent (hax mode 375-383 
parent folders, inking into, 63-65 


password «input» element, 689 
paths (links) 
absolute, 136-137, 145 
planning, 60-65 
тше, 137, 145 
percentages 
positioning elements with, 506 
sizing fonts with, 328-329, 534 
photo images, size of, 211 
Photoshop Elements 
finding web colors with, 348-349 
Matte color menu in, 211 
resizing images with, 181 
pixels 
pixel resolutions, 179-180 
sizing Fonts with, 328 
placeholder attribute forms), 691, 692 
“Plain text", 13 
PNG images, 167-168, 172, 208-205, 211 
poris 145 
position property, 504-507, 337 
poster attribute (video) 5 
POST method, 678-680, 692 
<pre> element, 114 
Preferences, TextEdit, 13 
preload attribute (<video>), 584 
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properties rows (HTML tables) 
CSS, 300 adding calor 1o, 618-620 
of fonts, 312-313 cells spanning ruuhiple, 622-624 
inherited, 301,464 columns and, 607 
list-style (CSS, 634 5 


shortcuts for, 466 
preudo-clanes, 454-454 
pseudo-elements, 694 ordering of, 
put «filename? command, 130 overriding inherited styles with, 284-285 


ped command (FTP), 131 


dos 619 


writing or multiple elements, 264-266 


Q 8 


<q> elements, 86-80, 92, 117 


Salar, 16 
R sans-serif fonts, 314, 320. 
saving 

radio buttons 692 HAL 
radio «input» element, 653, 663, 668 images, 187 
ragged borders, 349 “Save for Web" option, 183-181, 107, 201-205 
"range" type, 692 sereen readers, 157 
range <input> element, 656 <script> clement, 703 
relative font sizing, 328-329 scripting, server-side, 709 
relative links, 154 <section> element, 562-564, 572-579, 595 
relative paths адга element, 692 

absolute paths and, 137 selecting 

basies, 69-71 clemens by siblings 699 

grand challenge solutions, 75-76 clemens with idi/clases, 395 

vs URLs, 145, 159 <select element, 655, 663, 665-667 
relative positioning, 506, 536, 537 selectors (CSS) 
reload button (browsers, 24 basics, 267 
required attribute, 692 clas, 2 


‘combining, 698-699 
descendant, 437-439 
serif fonts, 314, 320 


required atribute forms), 691 
RGB color values 
specifying in CSS, 344 


web colors and, 340-342 server-side scripting 651, 709 
right property, 504 SFTP Secure File Transfer Protocol), 132 
root folders (server), 129-133 shortcuts, property, 465 

shorthand, 
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sidebars, laying out, 488-490, 499 
sizing/resizing 
fonts, 312, 328-334 
images, 174, 178-184, 183-185, 
source? element, 589-591 
<span> clement (HTML, 448-450, 466 
special characters, 112-113 
specificity; calculating, 460-461 
яс attribute (CSS), 68-69, 170, 211, 5 
Starbuzz Coffee project 
adding CSS to 30-3 
basie structure with HTML tags, 21 
creating web page, 11-12 
loading content into browser, 17 
markup, 38 
structure, 10 
states of linkes, 453 
static positioning, 506, 936, 537 


<strong> element, 114 
styles 
quide to applying, 292-295 
inheriting from parent elements, 281-285 
<style> element, 29-32 
<style> element, placing, 36 
<style> tags, 261-263, 301 
stylesheets, multiple, 399-100, 105 
styling fonts, 337-339 
subfolders, inking into, 60-62 
subheadings, HTML, 22 
submit buttons, 692 


submit <input> element (forms), 652, 663 
SVG fonts, 325 


T 


<table> element (HTML) 634 
tables, HTML 
adding captions to, 09-610 
adding color to, 618-620 


the index 


adding styles to, 612-616 
cells spanning multiple rows, 622-624 
collapsing borders, 616 
creating, 603-607 
GSS table displays, 337, 607 
pasting into web pages, 611 
styling ists in, 631-633 

tags, HTML 
Dasic, 25-42 
in Head First Lounge project, 5-6 
matching, 25 
mismatching, 109-110 
nested, 26 
Starbuzz Caffee project, 21 
staring and ending, 
structuring text with, 21-28, 39-41 

target attribute, 156-157, 159 

<td> clement, 60-606, 624, 634, 641 

tel <inpue> element (forms), 657, 663 


anti-aliasing, 210 
editors, 16 
lowing onto web pages, 478 
fonts. See fonts (CSS) 
text-align property, 431-433, 466, 634 
<textarea> element (form), 654, 663, 673, 692 
text-decoration property (CSS) 267, 513, 353, 355 
TextEdit (Mac), 12-13 
text <input> element, 652, 692 
wrapping around list markers, 633 
<th> element (HTML), 601-606, 634 
thumbnails, 192-196, 211 
<time> element, 114, 565-566, 595 


«tie» clement, 8, 24-24 
title atribute (<a> clement), 147-149 
tooltips, 153 

top property 504 

<ur> element, 604-606 

transforms and transitions (CSS), 701-702 
transparency in images, 204-205, 210 
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ае ай tiling HTML ales 605 
plying HTML video, 8 
U ann m by OF 
handing of ges 161-106 
<ul> clement, 104-106, 110-119 е 
underlining tet, 267 нарт HTML, 5-8 
Unicode, 112 113,208 Tong conc io, 1-19 
unordered lists, 102-105, 633. opening pages in, 19 
URLs (Uniform Resource Locators) end чай Hay 180-196 
е К Has sn 
teuer and, 36 
far imagen 171-172 amm 


<ur> clement forms) 663 
эй input» element (forms) 657 
ОТЕ encoding, 18, 239, 249 


у specifying, 343-347 
Weh Fonts, 325.327, 706 

validating web forms, See forms, HTML 

CSS validator, 294-299 WebM container, 586-587 

WSC ийиш 25-200 warp 
чане мийме (orna), 655, 6091 adding executable content to, 703 
vendor-specific CSS properties, 700 applications for creating, 707 
vertical-align property, 516, 520, 634 dividing into sections with «div» element, 417-422 
<video> cement (HTML) bon the web works, 2-6 

attributes, 584 linking to extemal CSS stylesheets, 273-277 

basics, 580-583 opening in browsers, 19 

formats, 586-591 setting background color, 
visited pseudo-class, 455 structure of, 115 
void elements, 98-99, 115, 172 ‘web pages, constructing 

adding <blockquote> elements, 0-94 
W adding chr» clement, 96-99 
adding <q> clement, 86-88 

WSC Validator, 233-238, 249, 298-209 outline, 81 
web applications, HTMLS for, 242 nerven, 79 
kapeana rough design sketch, BO 

Бало, $ testing page, Ul 

broken images ia, 215 weh servers 

builtin default styles, 28 baie, 

choosing, 16 editing fles on, 132 


720 Index 


www d bobs ire 


moving fles to root folder on, 128-131 
port 80 and, 145 
requests from browsers, 138 
тоо folder, importance of, 129 
submitting forms to, 646-647 
websites for farther information 
character encoding, 249 
CSS3 Media Queries specification, 403 
domain names, 126-127 
FTP applications, 132 
hosting companies, I 
symbol/foreign character abbreviations, 112-113 
WAC validator, 233 
Web Fonts, 327 
weight property (CSS fonts), 335-336 
WHATWG and W3C, 591 
whitespace, use of, 36 
май atribute 
images, 174 
video, 584 


the index 


width property 
basics, 426-440 
borders and, 387 
CSS box model and, $69, 371 
height af columns and, 520 
setting for elements, 466 
windows, linking to nev, 155-157 
Windows, Microsoft 
creating HTML files in, 14-15 
FTP applications for, 142 
specifying fonts for, 321 
World Wide Web Consortium (W3C), 249 
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All interior layouts were designed by Eric Freeman and Elisabeth Robson. 
Tho books look and feel was based and extended from the original design by Kathy Sierra and Bert Bales 
Tho book was produced using Adobe InDesign CSS and Adobe Photoshop CS. The book was typeset using 
Uncle Stinky. Mister Frisky (you think we're kidding), Ann Satelite, Baskerville, Comic Sans (can you believe 
i), Myriad Pro, Skippy Sharp, Savoye LET, Jokerman LET, Courier New, and Woodrow typefaces. 

Interior design and production all happened on two Mac Pros and two MacBook Airs. 

Writing locations Included: Bainbridge Island, Washington; Portland, Oregon; Seaside, Florida; Lexington, 
Kentucky. Long days of writing were powered by zero caffeine and Brew Dr. Kombucha, and the sounds of 
Foster the People, B-52s, Duran Duran, David Bowie, Wiliam Shatner, Elvis Presley, Pink Floyd, Genesis, 
‘Simple Minds, Ratt, Skid Row, Men without Hats, Men at Work, Bern, Stove Roach, Tom Waits, Beyman. 
Brothers, and a heck of a lot more 80s music than you'd care to know about. 
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